复制webpack插件错误:主机定义的选项无效

Question

使用复制webpack插件后构建失败。已经测试了webpack和插件版本的兼容性(webpack5 cwp10(我没有什么想法了：(以前有人碰到过熟悉的东西吗？这可能是跨模块兼容性问题吗？

还提供了错误日志和配置代码提前感谢

错误为

HookWebpackError: Invalid host defined options
at makeWebpackError (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/HookWebpackError.js:49:9)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2495:12
at eval (eval at create (/home/egeo/Source/coreon-chrome-plugin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:38:1)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:457:26
at /home/egeo/Source/coreon-chrome-plugin/node_modules/copy-webpack-plugin/dist/index.js:485:13
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
-- inner error --
TypeError: Invalid host defined options
at /home/egeo/Source/coreon-chrome-plugin/node_modules/copy-webpack-plugin/dist/index.js:481:13
at fn (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:456:9)
at Hook.eval [as callAsync] (eval at create (/home/egeo/Source/coreon-chrome-plugin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:36:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/egeo/Source/coreon-chrome-plugin/node_modules/tapable/lib/Hook.js:18:14)
at cont (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2492:34)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2538:10
at /home/egeo/Source/coreon-chrome-plugin/node_modules/neo-async/async.js:2830:7
at Object.each (/home/egeo/Source/coreon-chrome-plugin/node_modules/neo-async/async.js:2850:39)
at Compilation.createChunkAssets (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:3769:12)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2533:14
caused by plugins in Compilation.hooks.processAssets
TypeError: Invalid host defined options
at /home/egeo/Source/coreon-chrome-plugin/node_modules/copy-webpack-plugin/dist/index.js:481:13
at fn (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:456:9)
at Hook.eval [as callAsync] (eval at create (/home/egeo/Source/coreon-chrome-plugin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:36:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/egeo/Source/coreon-chrome-plugin/node_modules/tapable/lib/Hook.js:18:14)
at cont (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2492:34)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2538:10
at /home/egeo/Source/coreon-chrome-plugin/node_modules/neo-async/async.js:2830:7
at Object.each (/home/egeo/Source/coreon-chrome-plugin/node_modules/neo-async/async.js:2850:39)
at Compilation.createChunkAssets (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:3769:12)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2533:14

使用的配置是(webpack.config.js(

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = (env) => [
{
mode: 'production',
entry: './js/background.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'background.js',
},
},
{
mode: 'production',
entry: {
'./js/login': './js/login.js',
'./js/search': './js/search.js',
'./js/options': './js/options.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/',
},
module: {
rules: [
{
test: /.(scss|css)$/,
use: [MiniCssExtractPlugin.loader, "css-loader",
{
loader: "sass-loader",
}
]
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'styles/images/[hash][ext][query]'
}
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'styles/[hash][ext][query]'
}
},
]
},
plugins: [
new CopyPlugin({
patterns: [
{
from: '/extension-icons/*'
}
],
}),
new webpack.DefinePlugin({
BUILD_FOR: JSON.stringify(env.custom)
}),
new MiniCssExtractPlugin({
filename: ({ chunk }) => `${chunk.name.replace('/js/', '/styles/')}.css`,
}),
],
}
];

Answer 1

插件版本10开始使用动态导入的ES模块。这在各种工具中仍然有一些不太好的支持。例如，Yarn似乎处理得不好(但基于npm的设置也可能会被破坏(

github:上的相关错误报告

• https://github.com/webpack-contrib/copy-webpack-plugin/issues/652
• https://github.com/webpack-contrib/copy-webpack-plugin/issues/653
• https://github.com/webpack-contrib/copy-webpack-plugin/issues/643

官方回应：问题出在其他工具上，而不是插件本身。

看起来最好的方法是降级到v9，正如上面一些人已经提到的那样。