AngularJs with Webpackv1 升級到 Webpack4

Posted 2020-12-03 kingjaja

本篇記錄一下升級的血淚過程

請注意升級前請先創一個新目錄將升級應用與舊應用隔離

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://stackoverflow.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