??上一章節(jié)主要介紹了webpack的基礎(chǔ)用法宙搬，這一章節(jié)我們進一步學習webpack的進階用法，能夠更加加深對webpack的理解些举，增強css解析、代碼分割俭厚、代碼打包户魏、打包組件...
1.課程目錄
TIM截圖20200724094110.png
2.自動清理構(gòu)建目錄產(chǎn)物
（1）歷史遺留問題
上一章節(jié)中我們在構(gòu)建的時候，我們沒有通過webpack自動的去清理構(gòu)建目錄挪挤，而是每次手動的去清理叼丑，顯得很是浪費時間
微信截圖_20200801202720.png
（2）解決方法
-
通過npm命令手動去清理，如下：
微信截圖_20200801202908.png
注：這樣顯得代碼不夠優(yōu)雅扛门，每次構(gòu)建之前都要手動輸入以上命令鸠信，很是繁瑣。有沒有自動清理的方法呢论寨？如下
- 安裝clean-webpack-plugin
微信截圖_20200801203201.png
安裝
npm i clean-webpack-plugin -D
沒使用該插件前
微信截圖_20200801210206.png
我們可以發(fā)現(xiàn)星立，index.js和search.js每次構(gòu)建時，都會重復(fù)生成文件葬凳，造成dist文件的內(nèi)容過大绰垂。
使用該插件后，如下
微信截圖_20200801213231.png
3.PostCSS插件autoprefixer自動補齊CSS3前綴
目前市面上有各種各樣的瀏覽器沮明，各大廠商對css的兼容處理也是不盡相同辕坝，因此為了使css的屬性能夠兼容各大瀏覽，出現(xiàn)了各種css前綴荐健，目前主流的瀏覽器如下（包含css前綴）
微信截圖_20200802153023.png
例子如下
微信截圖_20200802153202.png
通過上面的例子我們可以看出酱畅，當我們編寫css樣的時候，需要手動不全前綴江场，這樣做是非常浪費時間的纺酸，有沒有我們在開發(fā)時正常編寫css樣式，在構(gòu)建項目的時候址否，代碼能夠自動幫我們補全css樣式的前綴呢餐蔬？答案是有的，如下
微信截圖_20200802153552.png
autoprfixer是css樣式的后置處理器佑附，與less-loader樊诺、sass-loader不同，它們是css的預(yù)處理器音同。
預(yù)處理器：一般是在webpack打包前處理文件词爬，如less-loader、sass-loader是在webpack打包css樣式前权均，將less文件顿膨、sass文件通過預(yù)處理器轉(zhuǎn)換css文件锅锨，再進行打包處理。
后置處理器：是webpack在將css打包后恋沃，再對文件處理必搞，如autoprefixer是將打包好的css文件進行css樣式前綴添加。
browsers: ["last 2 version", "> 1%", "iOS 7"]：含義是兼容到最近的2個版本且使用人數(shù)大于1%且最低版本是IOS7的瀏覽器囊咏。
使用autoprefixer之前恕洲，構(gòu)建的結(jié)果如下
微信截圖_20200802154933.png
可以看到display屬性并沒有補全。
接下來我們來看一下使用autoprfixer插件看一下
npm install postcss-loader autoprefixer -D注：autoprefixer一般和postcss-loader一起配合使用
微信圖片_20200802160815.png
可以看到梅割，這個插件已經(jīng)幫我們做了自動補齊
4.移動端CSS px自動裝換成rem
我們知道現(xiàn)在市面上的移動端是百花齊放研侣，各種分辨率都有，為了能夠使前端項目能夠兼容各個版本的瀏覽器炮捧，我們需要將px轉(zhuǎn)換成rem庶诡。我們先來看一張以IOS為例瀏覽器分辨率的圖，如下：
QQ截圖20200806212514.png
那如何做瀏覽器的適配呢咆课？
（1）第一種方法：媒體查詢
QQ截圖20200806212757.png
缺點：需要些多套適配樣式代碼末誓，造成項目體積的冗余，運行速度過慢书蚪，在這里不推薦使用媒體查詢喇澡。
（2）第二種方法：rem
css3出來之后，提出了一個rem單位殊校，含義如下
QQ截圖20200806214854.png
推薦使用該方法晴玖。使用方法如下
QQ截圖20200806215037.png
npm install px2rem-loader -Dnpm install lib-flexible -SremUnit：rem相對于px的一個單位，這里75表示为流，1rem=75px;
remPrecision：表示px轉(zhuǎn)換rem時呕屎，保留小數(shù)點的位數(shù)，這里的8表示保留小數(shù)點后8位敬察。
結(jié)果如下
QQ截圖20200806220331.png
5.靜態(tài)資源內(nèi)聯(lián)
QQ截圖20200809164104.png
（1）HTML秀睛、JS內(nèi)聯(lián)
QQ截圖20200809171113.png
注：使用raw-loader內(nèi)聯(lián)JS時，可能js代碼里面會有ES6語法莲祸，這時候就要先用babel-loader進行代碼轉(zhuǎn)換蹂安，再使用raw-loader內(nèi)聯(lián)js
（2）CSS內(nèi)聯(lián)
我們在講css文件指紋的時候，使用MiniCssExtractPlugin(不能和style-loader一起使用)將css樣式代碼提取了出來锐帜，并且給css文件添加了指紋策略√镉現(xiàn)在我們來說另外兩種方法。如下
QQ截圖20200809174724.png
npm install raw-loader@0.5.1 -D
