参照：Webpack 5 release (2020-10-10)
10/10 に webpack 5 がリリースされました 🎉
webpack 5 のリリースは行われたが、まだバグが多くあり、webpack で使用する loader や plugin は対応が追いついていません。
パッとwebpack 5 関連の Issueを眺めるだけでも、まだ多くの問題があることがわかります。
なので、webpack 5 を使用するのは安全にいきたければ 1,2 ヶ月ほど待ってもよいと思います。
いまはこのバグ対応によりすでに webpack のバージョンは 5.2.0 になっています。
現在の webpack-dev-server は webpack v5 対応のバージョンががまだリリースされてないので、動かないケースが何点かあります。
webpack v5 対応のためv4 のリリースはされていますが、上記でも書いている通り、webpack dev server と組み合わせるとバグがあります。
webpack cli v4 から webpack-dev-server の起動をwebpack serveコマンドに統合するようになっています。
webpack serve コマンドの案内を促すエラー文の実装
新機能としてwebpack --analyzeコマンドで、webpack-bundle-analyzerを使用して、各モジュールのバンドルサイズを可視化することができるローカルサーバーを立ち上げることができます。便利。
https://webpack.js.org/blog/2020-10-10-webpack-5-release/#major-changes-removals
このような変更点があります。
- 永続的なキャッシング
- TS の対応で
@types/webpackが不要になり、import { WebpackOptionsNormalized } from 'webpack';で型を import できるようになった。(ファイル名を webpack.config.ts にする必要がある) - Tree Shaking の最適化が入りバンドルサイズ縮小に期待できる
- CommonJs の Tree Shaking 対応
- css の chunk が可能になった(MiniCssExtractPlugin使用時にできる)
ここでは特に大きな破壊的変更を 2 つほど紹介します。
webpack を使用すれば、Node.js のコードをクライアントサイドで使用し、自動で polyfill を挿入してくれていました。
今後 webpack は Web で動作するコードに焦点を当てていくため、Node.js の polyfill がバンドルに含まれ、結果的にバンドルサイズがデカくなくることを望まないようになったので、 自動で polyfill を挿入しなくなります。
polyfill を挿入したい場合はwebpack/node-libs-browserを参照して、自前で挿入する必要があります。 また、クライアントサイドで Node.js に依存したパッケージを使用している場合は、パッケージの対応を待つか、フロントエンド互換のあるパッケージに変更する必要があります。
global,__filename,__dirnameも webpack の設定でデフォルトfalseに変更されるので、使用したい場合は明示的に変更する必要があります。
webpack が生成するコードが一部 ES2015 になったので、明示的に es5 への対応が必要になりました。 browserslist のサポートが含まれたので、browserslist の設定 or webpack の設定を変える、２つの選択肢があります。
- webpack の設定
webpack.config.js
module.exports = {
target: ['web','es5']
};
- browserslist の設定
.browserslistrc
last 1 version
ie >= 11
package.json
"browserslist": [
"last 1 version",
"> 1%",
"ie >= 11"
]
日本語でwebpack 5について解説を入れてくれている方もいるので、変更点についてはこちらが非常に参考になります。 https://blog.hiroppy.me/entry/webpack5