プロダクションで使うのはまだ早い(11月時点
webpack v5のリリースは行われましたが、まだバグが多くありwebpackで使用するloaderやpluginは対応が全然追いついていません。
webpack v5系のIssues を眺めると多くの問題があることがわかります。
プライベートでwebpack v5にアップデートを試みたところ全部壊れました。大変危険です、webpack v5 を使用するのは 数ヶ月ほど待ったほうが良いと思います。
周辺ツールの現状
webpackを使用するにあたって特に重要な webpack-dev-server と webpack-cli の現状は以下のとおりです。
webpack-dev-server
webpack-dev-server は webpack v5対応がまだリリースされてないので、動かないケースが何点かあります。
webpack-cli
webpack v5 対応のためv4のリリースはされていますが、上記でも書いている通りwebpack-dev-serverと組み合わせるとバグります。
webpack-cli v4からwebpack-dev-server の起動をwebpack serveコマンドに統合するようになっています。
変更内容
主に下記のような変更があります。
- 永続的なキャッシング
- TypeScriptの対応で
@types/webpackが不要になり、import { WebpackOptionsNormalized } from 'webpack';で型を import できるようになった。(ファイル名を webpack.config.ts にする必要がある - Tree Shaking の最適化が入りバンドルサイズ縮小に期待できる
- CommonJs の Tree Shaking 対応
- css の chunk が可能になった( MiniCssExtractPlugin 使用時にできる)
破壊的変更
特に大きな破壊的変更を2つ取り上げます。
Node.js の polyfill を自動で挿入しなくなった
今まではwebpackを使用すればNode.js のコードをクライアントサイドで使用し、自動でpolyfillを挿入してくれていました。
今後 webpackはwebで動作するコードに焦点を当てていくため、Node.jsのpolyfill がバンドルに含まれ、結果的にバンドルサイズがデカくなくることを望まないようになり、
自動で polyfill を挿入しなくなりました。
polyfill を挿入したい場合は webpack/node-libs-browser を参照して、自前で挿入する必要があります。
また、クライアントサイドで Node.js に依存したパッケージを使用している場合は、パッケージの対応を待つか、フロントエンド互換のあるパッケージに変更する必要があります。
global, __filename, __dirnameもwebpackのデフォルト設定でfalseに変更されたので、使用したい場合は明示的に変更する必要があります。
デフォルトランタイムが一部 ES2015 になった
webpackの生成するコードが一部 ES2015 になったので、明示的に es5 への対応が必要となりました。
browserslistnのサポートが含まれたので、browserslistの設定またはwebpack の設定を変える、２つの選択肢があります。
- webpack の設定
webpack.conf.js
module.exports = {
target: ['web','es5']
};
- browserslist の設定
.browserslistrc
last 1 version
ie >= 11
- package.json
"browserslist": [
"last 1 version",
"> 1%",
"ie >= 11"
]