webpack進階用法總結

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.多頁面應用打包的通用方式

 

發佈了148 篇原創文章 · 獲贊 159 · 訪問量 68萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章