reactjs - CopyWebpackPlugin 到 react webpack 应用程序中的 dist 文件夹

Question

我尝试使用 CopyWebpackPlugin 将 src 中的图像文件夹复制到根 dist 文件夹，但出现以下错误：

ValidationError：无效的选项对象。Copy Plugin 已使用与 API 模式不匹配的选项对象进行初始化。

• options[0] 缺少属性“模式”。应该是：[非空字符串 | object { from, to?, context?, globOptions?, filter?, toType?, force?, priority?, info?, transform?, transformPath?, noErrorOnMissing? }, ...]（不应少于 1 项）

（插件我试图使用） - https://webpack.js.org/plugins/copy-webpack-plugin/

webpack.config.js 如下：

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const pathName = path.resolve(__dirname, "./src");
const entry = path.resolve(__dirname, "./src/index.js");
const Dotenv = require("dotenv-webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
console.log("path is", pathName, entry);

module.exports = {
  devServer: {
    contentBase: pathName,
    historyApiFallback: true,
  },
  entry: entry,
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: "babel-loader",
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: [
              "@babel/plugin-proposal-class-properties",
              "@babel/plugin-transform-runtime",
            ],
            //npm install --save-dev @babel/plugin-transform-runtime
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },

  output: {
    filename: "bundle.js",
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, "./src/index.html"),
    }),
    new Dotenv(),
    new CopyWebpackPlugin({
      patterns: [{ from: "src/images", to: "images" }],
    }),
  ],
};

标签： reactjswebpack