mini-css-extract-pluginのアプデでハマった

mini-css-extract-pluginを2.4.5にあげる際に、ビルドが通らなくなってしまった事があったのでメモを残しておきます。

結論から書くと、自分の場合はpublicPathが意図せず二重に設定されてしまっていることが問題でした。


このあたりの話

github.com

webpack5に上げてfile-loaderからAsset Modulesに移行した経緯があるのですが、file-loaderでpublicPath: '/'を設定していたという事情があり、Asset Modulesのgenerator内でも同じようにpublicPathを設定していました。
しかしこうすると、generatorの外では何も定義していない場合publicPath: 'auto'がデフォルト値として使用されているため、publicPathが二重扱いになりurl()が解決できないよ、というような話らしいです。

mini-css-extract-pluginでは options.publicPath が存在しているので、generator内のpublicPathを消してこちらを使えば解決できるということでした。

- MiniCssExtractPlugin.loader,
+ {
+   loader: MiniCssExtractPlugin.loader,
+   options: {
+     publicPath: '/',
+   },
+ },