LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

Node.js image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

変更前5.1.1
変更後6.0.1
CopyWebpackPluginのバージョン
webpack4.43.0
webpack-cli3.3.11
webpackのバージョン

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プロパティを使え。

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

やっぱり変わってますね。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は除外
            ],
          },
        },
      ],
    }),
  ],
};

この情報は新しいものではありません。2年ぶりくらいのバージョンアップなので。

前のページ
webpack4-css-loaderのminimizeでエラー
webpack4, html-loaderのバージョンアップでエラー
次のページ

JavaScriptの本

post-cta-image

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。


javaScriptの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください