使用复制-webpack-插件返回一个错误

Question

我正试图将一个资产文件夹从src复制到dist，但我无法让它工作。在我的webpack配置中我有：

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

const images = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { 
          from: 'src/assets/*',
          to: 'dist/assets/*'
        },
      ],
    }),
  ]
};

module.exports = [
  images
];

但它给了我一个错误：

ERROR in main
Module not found: Error: Can't resolve './src'

包文件中有"copy-webpack-plugin": "^9.0.1",和"webpack": "^5.47.0", "webpack-cli": "^4.7.2"。

Answer 1

默认webpack配置对在其中执行的环境做了一些假设。如果没有配置其他内容，则会多次尝试为构建过程找到一个条目(启动)点。除其他外，它在index.js文件夹中查找名为src的文件。文件本身可以是空的。因此，您只需在src中创建这个空文件，错误就会消失。

此外，CopyPlugin应该配置如下：

patterns: [
        {
          from: "src/assets/",
          to: "assets/",
        },
      ]

不需要星号(*)，默认情况下，assets文件夹将在dist中创建。

作为构建过程的结果(在本例中是不需要的)，将在main.js文件夹中生成一个空的dist文件。如果这是不可接受的，则可以使用WebpackShellPluginNext插件(需要安装并添加到package.json)删除它，该插件只需在进程结束时删除main.js。

const CopyPlugin = require("copy-webpack-plugin");
const fs = require("fs");
const WebpackShellPluginNext = require("webpack-shell-plugin-next");

const images = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "src/assets/",
          to: "assets/",
        },
      ],
    }),
    new WebpackShellPluginNext({
      onBuildEnd: {
        scripts: [
          () => {
            fs.unlinkSync("dist/main.js");
          },
        ],
      },
    }),
  ],
};

module.exports = [images];

Answer 2

根据本期，您可能使用copy-webpack-plugin不支持的Webpack版本。

..。最新版本需要webpack@5。

假设你是Webpack 4号，你有两个选择：

1. 升级到webpack@5.x，这是copy-webpack-plugin@8.x支持的。
2. 降级为copy-webpack-plugin@6.x，这是支持webpack@4.x的最后一个版本。