webpack4, CopyWebpackPluginのバージョンアップでエラー

webpackプラグインのバージョンアップではおなじみの、オプション変更でエラーが出ました。

まぁこれが嫌でたまにしかバージョンを上げず、余計に出るんですが。

今回は、srcのファイルを何もせずそのままdistへコピーするCopyWebpackPluginです。

変更前	5.1.1
変更後	6.0.1

CopyWebpackPluginのバージョン

webpack	4.43.0
webpack-cli	3.3.11

webpackのバージョン

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

webpack5の安定版が出る準備のため、インストールしているパッケージを最新に上げたのですが、毎度おなじみよろしく、エラーが出ました。

（そろそろwebpack5安定版が出ると踏んでいる。）

変更前の設定です。

webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin([
      {
        from: "./src/sample/sample1" + "/index.html",
        to: "./sample/sample1",
      },
      {
        from: "./src/sample/sample2" + "/index.html",
        to: "./sample/sample2",
      },
      {
        from: "./src/sample/sample3" + "/index.html",
        to: "./sample/sample3",
      },
    ]),
  ],
};

するとこんなエラーが。

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
    at validate (***\***\node_modules\schema-utils\dist\validate.js:96:11)
    at new CopyPlugin (***\***\node_modules\copy-webpack-plugin\dist\index.js:24:30)

以下省略。

patternsプロパティを使え。

どうやらオプション設定方法が変わったらしい。ドキュメントを確認してみた。

webpack.js.org - CopyWebpackPlugin

やっぱり変わってますね。from, toはpatternsプロパティに入れるらしい。変更後の設定です。

webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "**/*.html",
          to: "./sample",
          context: ".src/sample",
        },
      ],
    }),
  ],
};

contextを使えば、似たような出力をギュッとまとめられます。

サンプルは、src/sample配下にあるhtmlファイルはすべてコピーされ、ディレクトリ構成も一緒にコピーされます。

（前からあったのかな？）

それ以外にも細かい設定ができるみたいです。たとえば除外設定。

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "**/*.html",
          to: "./sample",
          context: ".src/sample",
          globOptions: {
            dot: false, // .***のファイルは除外
            gitignore: false, // falseじゃないとエラーになる。
            ignore: [
              "**/test/**", // test配下のhtmlは除外
              "**/sample.html", // sample.htmlは除外
            ],
          },
        },
      ],
    }),
  ],
};