您如何修复 webpack4/copy-webpack-plugin 中的“路径中的错误必须是字符串。收到未定义”答案

【问题标题】：How do you fix "ERROR in Path must be a string. Received undefined" in webpack4/copy-webpack-plugin您如何修复 webpack4/copy-webpack-plugin 中的“路径中的错误必须是字符串。收到未定义”
【发布时间】：2019-07-31 16:43:34
【问题描述】：

我想要实现的是创建一个单独的 webpack 资产文件，用于将静态资产从 src 文件夹复制到 web 文件夹。

node version: 8.15.0
yarn version: 1.13.0
webpack: 4.19.1
copy-webpack-plugin: 6.0.0

首先，我已经有一个处理所有 js 文件的 webpack.common.js 文件，并且我已经创建了 assets 文件，如下所示。

当我跑步时

webpack --config=webpack/webpack.assets.js --mode development --progress --color

或

webpack --config=webpack/webpack.config.js --config=webpack/webpack.assets.js --mode development --progress --color --env development

我收到此错误ERROR in Path must be a string. Received undefined，但我不知道它来自哪里。

顺便说一句，我最近才开始接触 webpack。

webpack.common.js

const webpack = require('webpack');
const path = require('path');

const PATHS = {
    src: path.join(process.cwd(), 'src', 'js'),
    dist: path.join(process.cwd(), 'web', 'js')
};

module.exports = {
    entry: {
        homepage: path.resolve(PATHS.src, 'pages/homepage.js'),
        otherfile: path.resolve(PATHS.src, 'pages/othefile.js'),
    }
    output: {
        path: PATHS.dist,
        filename: '[name].js',
        chunkFilename: '[name].js',
        publicPath: '/js/'
    },
    ...
}

webpack.assets.js

const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

const PATHS = {
    src: path.join(process.cwd(), 'src', 'svg'),
    dist: path.join(process.cwd(), 'web', 'svg')
};

module.exports = (env) => {
    const svgFormat = env === 'production' ? '[name].[hash].[ext]' : '[name].[ext]';

    return merge(commmonConfig, {
        entry: [
            path.resolve(PATHS.src, 'logo1.svg'),
            path.resolve(PATHS.src, 'logo2.svg')
        ],
        output: {
            path: PATHS.dist
        },
        module: {
            rules: [
                {
                    test: /\.(svg)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: svgFormat,
                            },
                        },
                    ],
                },
            ]
        },
        plugins: [
            new CopyPlugin([
                {
                    from: PATHS.src,
                    to: PATHS.dist,
                    force: true,
                    toType: 'dir'
                },
                {
                    copyUnmodified: true,
                    debug: 'debug'
                }
            ])
        ]
    });
};

我希望能够正确地运行资产命令，因为实际文件被正确复制。

非常感谢任何想法！

【问题讨论】：

您的 CopyPlugin 插件配置错误。 module.exports = { plugins: [new CopyPlugin([...patterns], { copyUnmodified: true })], };

标签： javascript node.js svg webpack webpack-4

【解决方案1】：

您已将选项对象作为第二个模式传递。

将其移出模式数组并将其作为第二个参数传递：

plugins: [
  new CopyPlugin(
    [
      {
        from: PATHS.src,
        to: PATHS.dist,
        force: true,
        toType: 'dir'
      }
    ],
    {
      copyUnmodified: true,
      debug: 'debug'
    }
  )
]

当您的选项对象被视为模式但没有from 属性时，您会收到错误消息。

【讨论】：

谢谢，解决了！当有新鲜眼睛的人看一眼时真是太好了。