JavaScript
webpack
PWA

Webpack v3 → v4移行パッケージ対照表

webpack v4がリリースされてから久しいですが、v3を使っているという方はまだそれなりにいるのではないかと思います。

私の業務で触れた当初、v4はリリースしたてでプラグイン周りもまだベータが取れていかなったのでv3を選択していましたが、安定してきたのでv4に移行しました。

移行の段階でいつくかのエラーとの戦いがありました。直接的な原因がわかるエラーは良いのですが、間接的にしか読み取れないエラーもあったのでpackage.jsonと見比べて不足している変更がないかわかるよう対照表にしました。

現在移行を検討している方、詰まっている方へ何かの助けになれば幸いです。

パッケージ v3 v4 用途 備考
webpack webpack@^3.x.x webpack@^4.x.x バンドラー modeオプションが必須に1
webpack-cli 不要 webpack-cli@^3.x.x cliツール v4から新たに追加
webpack-dev-server webpack-dev-server@^2.x.x webpack-dev-server@^3.x.x ローカルサーバー
html-webpack-plugin html-webpack-plugin@^2.x.x html-webpack-plugin@^3.x.x html書き出し
extract-text-webpack-plugin extract-text-webpack-plugin@^2.x.x 削除 css抽出 v4でcssへの使用が非推奨になった2
mini-css-extract-plugin なし mini-css-extract-plugin@^0.x.x css抽出 extract-text-webpack-pluginに代わり追加
uglifyjs-webpack-plugin webpackに同梱 uglifyjs-webpack-plugin@^2.x.x js圧縮 v4でplugins → optiomization.minimizer配下に変更3
webpack.optimize.CommonsChunkPlugin webpackに同梱 なし js分割 v4でplugins → optiomization. splitChunks配下に変更4
webpack-pwa-manifest webpack-pwa-manifest@^2.x.x webpack-pwa-manifest@^3.x.x manifest.json作成 PWA関連
workbox-webpack-plugin workbox-webpack-plugin@^2.x.x workbox-webpack-plugin@^3.x.x Service Worker作成 作成時 workboxPlugin → WorkboxPlugin.GenerateSWに変更、glob設定が不要になり一部プロパティ名変更5