【Webpack】Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. options has an unknown property ‘path’. These properties are valid:とエラーが出る

Webpack で Mini CSS Extract Plugin を使っていて、プラグインをアップグレードしたところ下記のエラーが出ました（webpack などもまとめてアップグレードしたので、どのアップグレードが原因かははっきりしてません）。

ValidationError: Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'path'. These properties are valid:
   object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }

webpack.config.js の該当箇所

...
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css',
        path: path.resolve(__dirname, outputDir),
      })
    ],
...

解決策

もともと CSS ファイルを別ファイルとして出力したかったのでこのプラグインを入れていましたが、pathは使えなくなったようなので、削除しました。

...
      new MiniCssExtractPlugin({
        filename: '[name].css',
      })
...

pathでは css 出力先のパスを指定していたので、上記を削除した代わりにuseの方に追加します。

use の loader の修正

use: [
  ...
    loader: MiniCssExtractPlugin.loader,
  ...
],

loader を読み込んでいただけでしたが、先程削除したpathをpublicPathとしてoptionsを追加します。

use: [
  ...
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: path.resolve(__dirname, outputDir),
    }
  },
  ...
],

• path … const path = require('path')で事前に追加しておく
• outputDirは css を出力したいパス

以上です。