webpack遇到的問題

2021-09-13 13:03:26 字數 1110 閱讀 6057

問題一: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版本有要求。

持續更新中。。。

webpack遇到問題彙總

使用npm安裝webpack時,遇到如下錯誤 可以知道是網路連線有問題,解決方法如下 關閉npm的https npm config set strict ssl false清除npm的 命令如下 把倉庫設定為 npm config set registry 設定完命令列 再安裝webpack就成功了...

webpack遇到各種問題到解決

webpack的概述就不再多少了。我直接講一下我在學習webpack過程中遇到的一些問題。問題1 在安裝區域性的webpack的過程中一直會報錯,無法安裝成功。一般原因是你在執行 npm init y 的時候,預設的把 package.json 檔案中 name 屬性命名為 webpack 所以會導...

nodejs npm安裝webpack遇到的問題

問題一 如果出現node或者npm不是內部或者外部命令,可能是node環境配置問題,可以自己去查一下怎麼配置node路徑。如果確認路徑沒有問題 那應該是系統問題,重啟一下環境配置才生效,我也想請教一下為什麼我每次配置完都要重啟電腦才能生效。還有,我查了資料發現還需要配置資料夾 在nodejs路徑下新...