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 |