向next.config.js添加CopyPlugin

Question

module.exports = {
  ...otherConfig,
  plugins: [
    new CopyPlugin([{ 
        from: './node_modules/@pdftron/webviewer/public',
        to: './dist/public/webviewer' 
      }]
    ),
  ],
};

但是，由于我使用的是Next.js，所以我遵循这里的文档：https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

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

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        // Note: we provide webpack above so you should not `require` it
        // Perform customizations to webpack config
        const newconfig = config.plugins.push(
            new CopyPlugin([
                {
                    from: './node_modules/@pdftron/webviewer/public',
                    to: './public/webviewer',
                },
            ]),
        );

        // Important: return the modified config
        return newconfig
    },
}

为什么不动呢？

这是错误：

ready - started server on http://localhost:3000
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, filter?, toType?, force?, info?, transform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
    at validate (D:\Code\Javascript\nextjs-projects\new-amsterdam\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:104:11)
    at new CopyPlugin (D:\Code\Javascript\nextjs-projects\new-amsterdam\node_modules\copy-webpack-plugin\dist\index.js:40:31)
    at Object.webpack (D:\Code\Javascript\nextjs-projects\new-amsterdam\next.config.js:8:13)
    at getBaseWebpackConfig (D:\Code\Javascript\nextjs-projects\new-amsterdam\node_modules\next\dist\build\webpack-config.js:136:360)
    at async Promise.all (index 0)
    at async HotReloader.start (D:\Code\Javascript\nextjs-projects\new-amsterdam\node_modules\next\dist\server\hot-reloader.js:14:2403)
    at async DevServer.prepare (D:\Code\Javascript\nextjs-projects\new-amsterdam\node_modules\next\dist\server\next-dev-server.js:15:414)
    at async D:\Code\Javascript\nextjs-projects\new-amsterdam\node_modules\next\dist\cli\next-dev.js:22:1 {
  errors: [
    {
      keyword: 'required',
      dataPath: '[0]',
      schemaPath: '#/required',
      params: [Object],
      message: "should have required property 'patterns'",
      schema: [Object],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
    }
  ],
  schema: {
    definitions: { ObjectPattern: [Object], StringPattern: [Object] },
    type: 'object',
    additionalProperties: false,
    properties: { patterns: [Object], options: [Object] },
    required: [ 'patterns' ]
  },
  headerName: 'Copy Plugin',
  baseDataPath: 'options',
  postFormatter: null
}

提前谢谢你！

Answer 1

你答案中的代码是正确的，我希望我能帮助解释为什么。我可以在您的原始代码中看到两个错误：

1. copy-webpack-plugin配置错误

您的原始配置是一个具有一个对象的数组：

new CopyPlugin([
  {
    from: './node_modules/@pdftron/webviewer/public',
    to: './public/webviewer',
  },
]),

但是为了得到您想要的结果，您需要为插件提供一个带有键"patterns“(包含一个数组)的配置对象，就像您在答案中所做的那样：

new CopyPlugin({
  patterns: [
    {
      from: './node_modules/@pdftron/webviewer/public',
      to: './public/webviewer',
    },
  ],
})

你在问题中发布的错误消息解释了插件是如何错误配置的，只是不是以最直观的方式：

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, filter?, toType?, force?, info?, transform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)

2.您的"webpack“方法返回值不正确。

在您的初始代码中，您指定了变量"newconfig“来获取config.plugins.push(...)的结果，然后返回它：

const newconfig = config.plugins.push(

// ... plugin config ...

// Important: return the modified config
return newconfig

但是，正如您从MDN docs on Array.push中看到的，Array.push的返回值是数组的长度。

因此，当您编写return newconfig时，就像编写return config.plugins.length一样，而next.js期望您返回整个配置对象。

当您将一项推送到数组中时，该数组将被就地修改，因此您不需要捕获新值。因此，您可以简单地返回原始配置：

// Important: return the modified config
return config

你的答案中的代码，就像它应该的那样工作：

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

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        // Note: we provide webpack above so you should not `require` it
        // Perform customizations to webpack config
        config.plugins.push(
            new CopyPlugin({
                patterns: [
                    {
                        from: './node_modules/@pdftron/webviewer/public',
                        to: './public/webviewer',
                    },
                ],
            })
        )

        // Important: return the modified config
        return config
    },
}

我不确定为什么您还需要卸载并重新安装copy-webpack-plugin包，除非我遗漏了什么。

Answer 2

这是愚蠢的，因为我不明白为什么这是可行的，但是...

我的新代码是

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

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        // Note: we provide webpack above so you should not `require` it
        // Perform customizations to webpack config
        config.plugins.push(
            new CopyPlugin({
                patterns: [
                    {
                        from: './node_modules/@pdftron/webviewer/public',
                        to: './public/webviewer',
                    },
                ],
            })
        )

        // Important: return the modified config
        return config
    },
}

和

我不得不跑了

npm uninstall copy-webpack-plugin --save
npm install copy-webpack-plugin@6.2.1 --save

现在没有错误..。怪异