Posted at

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