webpack遇到的問題

問題一：js中的css文件提取

原有使用方法

webpack版本是4, 提取插件是"extract-text-webpack-plugin"，效果以下圖:

只修改css文件，編譯效果以下圖：

修改css所在的js代碼，編譯效果以下圖：

存在的問題

若是隻更改 css文件，那麼編譯出來的結果hash保持不變，依賴於所在文件js內容的改變，只要內容更改，css生成文件的hash也就改變，形成的結果是隻改css沒辦法更新用戶緩存，改了js影響了css的hash, 用戶也更新緩存，可是內容卻沒有改變，不能很好利用緩存。

現有解決方法

webpack版本是4， 提取插件是"mini-css-extract-plugin"和"optimize-css-assets-webpack-plugin"，前者用於css文件提取，後者用於css文件提取優化,好比壓縮顏色、刪除註釋等，實驗以下：

js和css文件都不改

只改css文件

只改js

比較

從以上結果能夠看出生成的css文件和js文件hash值不受對方影響。

二者區別

"extract-text-webpack-plugin"使用chunkhash, "mini-css-extract-plugin"使用contenthash, 後者對webpack版本有要求。

持續更新中。。。