如何使用 CopyWebpackPlugin 复制和重命名文件

Question

作为构建过程的一部分，我已经使用 CopyWebpackPlugin 将一些文件从源复制到构建目录。在复制的同时我还想更改一些文件名。例如从 test.tsx.snap 到 test.js.snap。从文档中看起来这应该是可能的，因为他们有 path parameters for the templates 但目前还不清楚。我想对文件目录执行此操作，因此也需要通配符。

目前这不起作用：

const config = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, './test/snapshots/[name].tsx.[ext]'),
        to: path.resolve(__dirname, './test/snapshots/[name].js.[ext]')
      }
    ])
  ]
}

Answer 1

您可以使用 test option 捕获 RegEx 组，然后您可以在 to 中使用它们。

[
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, './test/snapshots/*.tsx.*'),
      to: '[2].js.[ext]',
      test: /(.+\/)?(.+)\.tsx\.snap/
    }
  ], options)
]

Answer 2

我可能有点晚了，但我认为可能更简单的解决方案是使用 toType 选项指定 'to' 选项是一个模板

const config = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, './test/snapshots'),
        to: path.resolve(__dirname, './test/snapshots/[name].js.[ext]'),
        toType: 'template',
      }
    ])
  ]
}

Answer 3

// webpack.config.js

{
  plugins: [
      new CopyWebpackPlugin({
      patterns: [
        {
          from: './sample/dir',
          to: ({ absoluteFilename }) => {
            // FILENAME_REGEX is a regex that matches the file you are looking for...
            const { fileName } = absoluteFilename.match({ FILENAME_REGEX });
            return `destination/dir/changeFileName(fileName).yaml`
          },
        },
      ],
    }),
  ]
}

如何使用 CopyWebpackPlugin 复制和重命名文件

How to copy and rename a file with CopyWebpackPlugin

file-copying

webpack