7.webpack 自動清理目錄構建產物 、css字首和px轉rem
阿新 • • 發佈：2020-07-30
-
我們在每一次打包都會生產新的檔案，如果之前的沒有刪除，那麼就會越來越多，使用clean-webpack-plugin可以做到構建前先自動清理
-
安裝npm i clean-webpack-plugin然後新增在plugins
-
-
css中px單位轉rem,適配更多手機，在沒有rem之前，為了適配各種移動端使用的是媒體查詢
-
安裝npm i postcss-loader autoprefixer -D 以及手淘的一個動態計算rem單位的解決方案 npm i lib-flexible -S
-
這時候就已經自動轉成rem了，但是想要自動調節，需要在html檔案引入lib-flexible。
-
需要在html檔案設定script標籤，再把這個檔案內容複製進去，標籤記得前置
-
-
自動生成css3字首
-
安裝 npm i postcss-loader autoprefixer -D
-
配置
-
{ test:/.less$/, use:[ MiniCssExtractPlugin.loader, //要在css前面 'css-loader', //要在less前面 'less-loader', { loader:
'postcss-loader', options:{ plugins:()=>[ // require('autoprefixer')({ // browser:['last 2 version','>1%','ios'] // }) //舊版本會報錯 require("autoprefixer")({ overrideBrowserslist: ['> 0.15% in CN'] }) ] } } ] }