AngularJs with Webpackv1 升級到 Webpack4

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

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

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