将 CopyPlugin 添加到 next.config.js

Question

我想将以下内容添加到我的 webpack 配置中！

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

但是为了获得您想要的结果，您需要为插件提供一个带有键“模式”（其中包含一个数组）的配置对象，就像您在答案中所做的那样：

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

但是，正如您从Array.push 上的 MDN 文档中看到的，Array.push 的返回值是array 的长度。

因此，当您编写 时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

现在没有错误...奇怪