AngularJs with Webpackv1 升級到 Webpack4

KingJaja發表於2018-07-10

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

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

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

相關文章