本篇記錄一下升級的血淚過程
請注意升級前請先創一個新目錄將升級應用與舊應用隔離
1. 需要將相關的套件做統一升級的動作，已確認需要升級所有舊的loaders
其它應用的套件可先不做升級的動作 (如果編譯錯誤時，依照出錯的模塊到github做查找的動作)
2. 需要手動將 webpack1 的config檔重寫為 webpack4
https://webpack-gatsby.netlify.com/how-to/upgrade-from-webpack-1/ 請參考本篇
總結幾個需要特別注意的地方
1. loader 的寫法已經完全不一樣了，請依照新的寫法將原本的loader設定區段移到module.rules[]裡
2. CommonsChunkPlugin 已經被取代了，請重新研究 optimize.splitChunks的用法
https://webpack.js.org/plugins/split-chunks-plugin/
3. production與dev環境上的設定檔，務必設置對應的mode參數值會比較好(如果沒特別設置預設為production)，在webpack4中mode設置為 production 預設會開啟效能調整
其它注意事項
1. eslint-loader 會去讀取 options , 所以在新的設定檔中需要多加入這段
new webpack.LoaderOptionsPlugin({ options: {} })
https://github.com/webpack/webpack/issues/6556
2. 注意一下output 是否有設定 publicPath
https://github.com/webpack/webpack/issues/3242
3. node-sass 安裝異常
npm --add-python-to-path='true' --debug install --global windows-build-tools
npm install --global node-gyp
4. postcss-loader 重新設置
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')({
'browsers': ['> 1%', 'last 2 versions']
})],
}
}
升級參考文章
https://github.com/postcss/postcss-loader
sample config file : https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af
https://*.com/questions/49782806/webpack-4-postcss-loader-and-autoprefixer-plugin
bundle vendor
https://webpack.js.org/guides/caching/
https://webpack.js.org/plugins/split-chunks-plugin/ chunk 設定
https://webpack.js.org/guides/code-splitting/ 模組切分參考
https://webpack-gatsby.netlify.com/how-to/upgrade-from-webpack-1/
https://webpack.js.org/migrate/3/#automatic-loader-module-name-extension-removed
https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af