AngularJs with Webpackv1 升級到 Webpack4

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

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

1. 需要將相關的套件做統一升級的動作，已確認需要升級所有舊的loaders

其它應用的套件可先不做升級的動作 (如果編譯錯誤時，依照出錯的模塊到github做查找的動作)

2. 需要手動將 webpack1 的config檔重寫為 webpack4

總結幾個需要特別注意的地方

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: {} })

2. 注意一下output 是否有設定 publicPath

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']
})],
}
}

升級參考文章

bundle vendor