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

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

モチベーション

• 最新のTypeScriptを導入したい
• ビルドを速くしたい

移行手順

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

• package.jsonの修正
• modeの追加
• pluginの設定見直し
• loaderのバージョンアップ

移行手順詳細

package.jsonの修正

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

package.json

"webpack": "^4.42.0"

npm install

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

modeの追加

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

webpack.config.js

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

pluginの設定見直し

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

before

webpack.config.js

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

after

webpack.config.js

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

loaderのバージョンアップ

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/
この辺りを参考にする必要がありそうです。

参考

https://webpack.js.org/migrate/4/
https://thebrainfiles.wearebrain.com/moving-from-webpack-3-to-webpack-4-f8cdacd290f9
https://auth0.com/blog/webpack-4-release-what-is-new/#L7--Faster-Build-Times