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

【问题标题】：How to copy and rename a file with CopyWebpackPlugin如何使用 CopyWebpackPlugin 复制和重命名文件
【发布时间】：2018-08-09 07:35:04
【问题描述】：

作为构建过程的一部分，我已经使用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]')
      }
    ])
  ]
}

【问题讨论】：

如果您要结束投票，请指向相应的 stackexchange 站点。还请记住，这是关于“程序员常用的软件工具”，因此属于 stackoverflow。

标签： webpack file-copying

【解决方案1】：

您可以使用test option 捕获正则表达式组，然后您可以在to 中使用。

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

【讨论】：

这个选项似乎没有记录在最新版本的软件包中：github.com/webpack-contrib/copy-webpack-plugin#patterns

【解决方案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',
      }
    ])
  ]
}

【讨论】：

【解决方案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`
          },
        },
      ],
    }),
  ]
}

【讨论】：