More than 3 years have passed since last update.

webpack3からwebpack4へバージョンアップ

Posted at 2020-06-03

保守できていなかったwebpackのバージョンをあげた際の記録です。
メモレベルで恐縮ですが、よかったら参考にしてください。

モチベーション

基本的にはこちらのマイグレーションガイド通りです。
https://webpack.js.org/migrate/4/

https://github.com/webpack/webpack/releases
こちらを参考にwebpackの箇所のバージョンを修正しました。

package.json

"webpack": "^4.42.0"

npm install

yarnの方はyarn installしてください。

productionとdevelopmentの二つがありwebpack.config.jsに記載しないと警告がでます。
本番用と開発用ですね。
圧縮されるかどうかなどの違いがあります。

webpack.config.js

module.exports = {
//...
  mode: 'production',
//...
}

3rd partyのプラグインのバージョンアップや一部機能がデフォルトになったため(modeの記述でOKになったため)見直しをしました。

webpack.config.js

module.exports = {
//...
  plugins: [
    new webpack.optimize.UglifyJsPlugin({})
  ]
//...
}

webpack.config.js

module.exports = {
//...
  mode: 'production'
//...
}

Cannot read property 'babel' of undefined

ビルドすると、上記のログが出たのでbabel-loaderをバージョンアップしました。
最新版にしたかったのですが、babelのバージョンアップとは切り分けたかったので

package.json

"babel-loader": "^7.1.5"

で対応しました。
babel-loaderの8系移行を使うには
https://koukitips.net/if-you-raise-the-babel-loader-to-v8-the-solution-is-when-you-get-an-error/
この辺りを参考にする必要がありそうです。