css tree shaking
我們和webpack(三)一樣，用案例說話
安裝css需要的兩個loader，css-loader 和style-loader
npm install css-loader style-loader -D
複製程式碼在專案webpack.config.js配置檔案中配置
在html檔案中寫一些結構
建立css檔案，在裡面寫一些頁面中有的和沒有的css樣式，沒有的用來驗證css抖動
在入口檔案index.js中將依賴的css檔案引入
執行npm run dev
css樣式被打包到出口檔案中，可以看到在打包好的檔案裡搜尋background-color能夠搜到
兩個外掛
mini-css-extract-plugin
單獨將css程式碼抽離成能打包的檔案的外掛
- 下載
npm install --save-dev mini-css-extract-plugin
複製程式碼- 在配置檔案中引入
- 在當前開發環境下載區域性webpack
下載方式見webpack學習(一)
- 執行npm run dev,會發現dist資料夾中多出main.css檔案
- 在index.html檔案中引入打包後的css檔案
- 在main.js中搜尋background-color，發現沒搜到，是因為我們已經給樣式單獨打包出css檔案了，js檔案裡就沒有行內樣式了
*注：單獨抽離css樣式和把css解析成行內樣式二者不可兼得，水火不相容
到這為止這個外掛已經實現了將css樣式單獨抽離出檔案的目的啦，接下來看下一個外掛，把css檔案也抖一下
purifycss-webpack
支援css tree shaking的外掛
- 下載
npm i -D purifycss-webpack purify-css
複製程式碼- 原理
將html裡的dom結構與css裡的樣式進行匹配，若匹配成功則不進行抖動，當然要根據哪個檔案進行抖，是需要我們手動配置規定的
- 配置方法(先只根據一個Html進行抖動)
下圖是隻根據當前路徑下的所有html檔案進行抖動
*css抖動一定要放在js之前，否則會報錯。
- 引入node的一些公共變數
- 執行npm run dev,再看main.css中發現沒有用到的都被抖掉了
上述只是dom和css能匹配的情況，那麼如果我們在js裡動態插入dom結構，這個外掛還會好使嗎？
- js中插入dom
- 執行npm run dev，發現a標籤還是被抖掉了，沒有留下來，是因為我們在配置檔案中設定的是與html對比，並沒有配置與js檔案對比
如果想要匹配js，就可以在配置檔案上再加上一條
這時候需要注意的是，我們要用到全域性匹配，因此在引入glob時就需要引入glob-all,下載glob-all並引入
- 執行npm run dev,a就不會被抖掉了