目的在于增強打包效率，提高團(tuán)隊工作效率。這篇文章主要應(yīng)用于C端用戶項目。
todo list
- [ ] 理解并優(yōu)化模板文件index.ejs
- [ ] 區(qū)分線上線下環(huán)境處理
- [ ] 抽取公共部分，及vendor
- [ ] 不斷優(yōu)化打包過程
- [ ] 引入打包可視化插件，對比優(yōu)化效果盯质，給出數(shù)據(jù)
1.webpack基本配置
- entry（字符串、數(shù)組概而、對象）
- output
- path
- filename
- [name] 使用入口名稱
- [hash] 使用每次構(gòu)建過程中呼巷，唯一的 hash 生成
- [chunkhash] 使用基于每個 chunk 內(nèi)容的 hash，內(nèi)容不變時hash值不會改變
- 不要在開發(fā)環(huán)境下使用[chunkhash]赎瑰，因為這會增加編譯時間朵逝。
- 將開發(fā)和生產(chǎn)模式的配置分開，
- 并在開發(fā)模式中使用[name].js的文件名乡范，
- 在生產(chǎn)模式中使用[name].[chunkhash].js文件名配名。
- hotUpdateChunkFilename 自定義熱更新 chunk 的文件名，默認(rèn)值是："[id].[hash].hot-update.js"
- library
- 在編寫一個導(dǎo)出值的 JavaScript library 時晋辆，可以使用library 和 libraryTarget渠脉，導(dǎo)出值可以作為其他代碼的依賴。
- 如library: "MyLibrary"
- library 名稱取決于 output.libraryTarget 選項的值瓶佳。
- loader
- resolve
- alias 短路徑引用
- extensions 自動解析確定的擴(kuò)展芋膘。默認(rèn)值為：[".js", ".json"]
- modules 告訴 webpack 解析模塊時應(yīng)該搜索的目錄。
- 其中，使用絕對路徑为朋，將只在給定目錄中搜索臂拓。
- unsafeCache
- 啟用，會主動緩存模塊习寸，但并不安全胶惰。傳遞 true 將緩存一切。默認(rèn)：true霞溪。
- 正則表達(dá)式孵滞，或正則表達(dá)式數(shù)組，可以用于匹配文件路徑或只緩存某些模塊鸯匹。
- unsafeCache: /src/utilities/ 只緩存 utilities 模塊
- resolveLoader
- 與resolve 對象的屬性集合相同坊饶，但僅用于解析 webpack 的 loader 包。
- moduleExtensions 想要不帶 -loader 后綴使用 loader殴蓬，可以使用：['-loader']
2.webpack plugins
| 名字 | 用途 | 用法 |
|---|---|---|
| 計算機 | $1600 | 5 |
| 手機 | $12 | 12 |
| 管線 | $1 | 234 |
3.模板文件index.ejs
Meta http-equiv屬性與HTTP頭的Expires中（Cache-control）詳解
