舉例：
如果希望在.html文件中使用style.css樣式，我們以前只學(xué)習(xí)過一種方式：直接在.html中通過link的方式來引入 ，這是傳統(tǒng)的做法，在webpack語境下响迂，我們將選擇一條不同的道路：在js文件中引入了css。
在入口文件中引入css會報錯细疚，這時候我們使用loader即可解決（它認(rèn)為是在入口文件引入一個模塊蔗彤。（在webpack中一切皆模塊））
*********************************************
步驟
在css中引入另一個css
然后在js（入口文件）中引入會報錯
安裝loader
npm i css-loader -D
開始引入：
打包成功
再次打包
它不會報錯，但是疯兼，頁面上也并沒有出現(xiàn)樣式的效果然遏。檢查打包之后得到的目標(biāo)代碼.js文件，發(fā)現(xiàn)其包含css代碼吧彪。但是待侵，它為什么不會顯示在頁面上呢？
如果我們希望樣式生效姨裸，最終在.html文件中有兩種情況：
①有style標(biāo)簽
②有l(wèi)ink標(biāo)簽
而css-loader只是允許你在.js中通過import來引入.css秧倾，如果你希望引入的css代碼最終以style標(biāo)簽的方式插入到html頁面中，則還需要安裝一個loader:style-loader
安裝并使用style-loader
npm i style-loader -D
最終結(jié)果：
html + js 可以有樣式
他還會告訴你樣式是在那個文件中出現(xiàn)的
這個js文件會自動給你加style（前邊入口處的代碼）
重點：注意這里容易報錯傀缩，看仔細(xì)
引入less（記得css的也同樣要引入）
在入口文件中引入less
一打包就錯誤
裝包
npm i less-loader less -D
寫配置
自動添加css樣式前綴（寫css樣式會有兼容性問題那先，去看看）
https://www.caniuse.com/flexbox
可以在這個網(wǎng)站查兼容性的情況
紅色不能用
灰色要加前綴
全背下來或者去查太慢了，所以我們可以使用loader來安裝以來
步驟
安裝依賴
在modules中補(bǔ)充設(shè)置postcss-loader
單獨設(shè)置postcss的autoprefixer插件
npm i postcss postcss-loader autoprefixer -D
內(nèi)容不用記（官網(wǎng)固定寫法）
{
? ? ? ? test: /\.less$/,
? ? ? ? // 匹配成功后（從后向前赡艰；從右到左）
? ? ? ? // 1. 先用less-loader去加載.less文件,轉(zhuǎn)成css
? ? ? ? // 2. 用postcss-loader配合autoprofixer加瀏覽器前綴
? ? ? ? // 3. 先用css-loader去加載css文件
? ? ? ? // 4. 再用style-loader把樣式以style標(biāo)簽的方式嵌入到html中
? ? ? ? use:['style-loader', 'css-loader', 'postcss-loader',? 'less-loader']
? ? ? }
在less中寫兼容性的樣式后
會自動給你加前綴
如果只想兼容ie10
注釋掉其他的售淡，只管ie10
6、file-loader-處理圖片文件
解決方法：
build里多了兩個文件
覺得這樣不好慷垮，再添加一局代碼
這樣寫揖闸，打包之后打開之后不顯示
要注意：此時打包得到的圖片的路徑可能有問題，需要你把src下的index.html手動復(fù)制一份到目標(biāo)文件夾料身，并同時修改引用的css汤纸，才能正確看到圖片。(后面會改成自動去復(fù)制)
7惯驼、文件指紋
文件名_八位hash值加后綴名
8蹲嚣、url-loader處理圖片
設(shè)置小于3k的轉(zhuǎn)成base64祟牲，所以當(dāng)我們發(fā)送請求的時候不需要在請求這個小文件隙畜，因為它已經(jīng)被轉(zhuǎn)成base64字節(jié)放到j(luò)s里
9、使用babel-loader處理js降級問題
