webpackを4から5に上げたときに対応したメモです。
packages
変更したバージョンは以下の通り
- webpack
4.46.0->5.18.0 - webpack-cli
3.3.12->4.4.0 - html-webpack-plugin
3.2.0->5.0.0-beta.6 - image-webpack-loader":
6.0.0->7.0.1 - optimize-css-assets-webpack-plugin 削除 -> css-minimizer-webpack-plugin
1.2.0 - terser-webpack-plugin 削除
- crypto-browserify
3.12.0追加 - stream-browserify
3.0.0追加
対応内容
package.json
npm-scriptsの変更
webpack-dev-server -> webpack serve にコマンドが変わったようだ。
[参考] https://qiita.com/whiteraccoon/items/f0675297fce333ac9474
あと環境変数の渡し方も以下に沿って変更。
https://webpack.js.org/guides/environment-variables/
webpack.config.js
環境変数の受け取り方の変更
環境変数の渡し方の変更に伴い、受け取り方も変更。
devtoolの指定の変更
でたエラー
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
BREAKING CHANGE since webpack 5: The devtool option is more strict.
Please strictly follow the order of the keywords in the pattern.
原因
noneは指定できなくなって、その場合はdevtoolフィールド自体を指定しないようにするぽい
[参考] https://www.white-space.work/webpack-5-devtool-none/
対処
noneの指定をundefinedに変更
optimizationの指定の変更
optimize-css-assets-webpack-pluginが
⚠️ For webpack v5 or above please use css-minimizer-webpack-plugin instead.
とのことなので、css-minimizer-webpack-pluginに入れ替え。
また、terser-webpack-pluginに関しては
If you are using webpack v5 or above you do not need to install this plugin. Webpack v5 comes with the latest terser-webpack-plugin out of the box.
とのことなので、
https://webpack.js.org/plugins/css-minimizer-webpack-plugin/
に載ってた書き方に従い、optimizationの指定部分を以下のように修正。
aliasの指定を追加
でたエラー
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
原因
使用しているライブラリの中で、webpack5からpolyfillされなくなったnode core modulesがwarningを吐く
[参考] https://sanchit3b.medium.com/how-to-polyfill-node-core-modules-in-webpack-5-905c1f5504a0
対処
必要なaliasを指定
