1.自動清理構建目錄產物
每次構建的時候不會清理目錄。造成構建輸出的目錄output文件越來越多
手動刪除
自動刪除
2.PostCSS插件autoprefixer自動補齊CSS3前綴
對css功能的增強
比如css3的
使用autoprefixer即可自動補全前綴
3.移動端CSS PX自動轉換爲rem
原始的適配方式媒體查詢
那麼提出了rem
利用 PX2rem將px轉換爲rem,這就需要知道一個rem的單位等與多少px,在頁面啓動的時候計算當前根元素的font-size 的值
手淘的lib-flexible可以自動的根據當前設備的寬高來計算 當前根元素的font-size的值
(步驟):
(1)安裝 :npm install px2rem-loader -D (轉化px - rem)
(2)安裝:npm install lib-flexible (計算當前設備的根元素fontsize)
(3)在webpack配置裏面添加loader
remUnit表示1rem=多少px .如圖即表示1rem = 75px
remPrecision 表示在px轉換爲rem的時候保留的 小數位數
(4)在頁面的前面手動找到lib-flexible.js,把他放在入口頁面的最開始,因爲頁面加載的時候就需要設置根元素的font-size,所以必須要放在最前面最優先執行
效果:
4.靜態資源內聯
資源內聯就是比如把一些css,js,字體或者圖片內聯到html裏面去
如果內聯的js是寫的業務腳本,就需要用到一個babel-loaer先進行轉換一下,在通過raw-loader內聯進來
eg:
(1)npm i [email protected] -D
(2)
5.多頁面應用打包的通用方式