乙個合格的webpack4配置工程師素養：第一部分
我們給打包的檔案打上hash是為了解決快取更新問題，常見需要打上hash的地方有。
output:
複製**
// 提取css
new minics***tractplugin()
複製**
html-webpack-plugin外掛程式可以把js/css注入到乙個模板檔案, 所以不需要再手動更改引用。
npm i -d html-webpack-plugin
複製**
const htmlwebpackplugin = require('html-webpack-plugin')
plugins: [
// 打包模板
new htmlwebpackplugin(
})],複製**
// index.html
複製**
複製**
npm i -d clean-webpack-plugin
複製**
const cleanwebpackplugin = require('clean-webpack-plugin')
plugins: [
// 清理dist目錄
new cleanwebpackplugin(['dist'])
]複製**
// index.html
"logo">
// base.scss
.logo
複製**
npm i -d file-loader
複製**
rules: [
// 處理檔案,},
]},
]
複製**
npm i -d image-webpack-loader
複製**
// 處理檔案
, },
,// optipng.enabled: false will disable optipng
optipng: ,
pngquant: ,
gifsicle: ,
// the webp option will enable webp
webp: }}
]},複製**
壓縮後29kb.
通過把一些小的轉為base65(dataurl)可以減少http請求, 提公升訪問效率。
npm i -d url-loader
複製**
// 處理檔案
, },
,// optipng.enabled: false will disable optipng
optipng: ,
pngquant: ,
gifsicle: ,
// the webp option will enable webp
webp: }}
]},複製**
字型處理的話配置如下：
},複製**
webpack4配置乙個多頁面
因為專案是用glpu搭建的工作流，在轉jenkins自動發布的時候，考慮到如果需要多頁面動態打包，需要改寫glup配置 不會glup也不想學 就將專案重構為webpack4.掃瞄專案多頁面入口 區分生產和開發環境webpck配置 指定專案打包 使用shell指令進行打包操作 如何處理不同的模組模式 ...
webpack4配置詳解
方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...
webpack4的簡易配置
scripts 處理html const htmlwebpackplugin require html webpack plugin 清空dist const cleanwebpackplugin require clean webpack plugin 分離css const minics tra...