您如何解决“路径错误必须是字符串。 在webpack4 / copy-webpack-plugin中收到“未定义”

Question

What I'm trying to achieve is to create a separate webpack assets file for copying static assets from the src folder to the web folder.

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

To start, I already have a webpack.common.js file which deals with all the js files, and I have created the assets file, which can be seen below.

When I run

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

or

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

I get this error ERROR in Path must be a string. Received undefined ERROR in Path must be a string. Received undefined and I can't figure it out where it comes from.

By the way I just started dealing with webpack recently.

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'
                }
            ])
        ]
    });
};

What I would like is to be able to run the assets commands with no errors, as the actual files get copied correctly.

Any ideas are very much appreciated!

Answer 1

You have passed your options object as a second pattern.

Move it outside of the patterns array and pass it as the second parameter instead:

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

You get the error as your options object is being treated as a pattern but does not have a from property.