前幾天用webpack4配置了下react,這裡主要說下碰到的一些問題,細節可以看原始碼。

• hash快取

  js和css都使用了chunkhash快取，但是出現一個問題就是，無論修改css檔案或者js檔案，都會導致chunkhash改變，這顯然不是我們需要的。

  然後用mini-css-extract-plugin將css提取出來之後使用contenthash，這樣對內容進行hash命名。

  但是出現一個問題就是每次css改變，js的chunkhash也會改變，不知道這個是一個bug還是一個feature.
  因為其他的版本是不存在這個問題的，但是我目前這個版本出現了這個問題，

  之前整了個demo沒有這個問題，檢視github程式碼庫的說法是推薦contenthash，chunkhash的保留只是為了相容。
  所以對js也進行contenthash命令, 這樣每次css修改都不會影響js的hash命名。

  關於hash命名的區別請前往

一些問題

• 資源壓縮

  程式碼沒有被很好的壓縮，壓縮了js發現css沒有壓縮.mini-css-extract-plugin並沒有給我壓縮css，所以css壓縮使用了optimize-css-assets-webpack-plugin.

  但是用了這個之後，發現js沒有壓縮，fuck中。。然後再重新手動壓縮(webpack4約定大於配置嘛，好耳熟).引入uglifyjs-webpack-plugin

  去壓縮js.

• SplitChunks

  這個預設是拆分非同步載入的程式碼，如果改成init或者all，會增大js檔案，這個可能需要在專案差不多的時候，權衡之後再做使用。可以參考這裡的對比

• typescript code splitting

  這邊折騰了不少時間，按照文件加上在tsconfig.json加上了"module": "esnext",發現還是報錯，不能正常解析，最後通過添加了es2015在lib裡。

tips

• ignore plugin

  moment這個包有個問題，那就是語言和核心部分捆綁在一起了，用這個可以忽略對應的部分。

• preload
  可以對資源進行預載入，這個視情況而定，也許你其他的模組打包出來體積很小，可以不用做這個。我是因為沒有對第三方的包進行提取，為了首次載入的速度，所以對後面的進行預載入.

如果有好的意見，歡迎提issue. 共同學習交流.