5

使用 copy-webpack-plugin 后构建失败。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`,
      }),
    ],
  }
];
4

1 回答 1

2

插件版本 10 开始使用动态导入的 ES 模块。这仍然在各种工具中得到了一定程度的支持。例如 Yarn 似乎不能很好地处理它（但基于 npm 的设置也可能会被破坏）

github上的相关错误报告：

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

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

于 2021-12-17T19:50:08.140 回答