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

Posted 2023-02-21

【中文标题】如何使用 CopyWebpackPlugin 复制和重命名文件

【英文标题】：How to copy and rename a file with 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 站点。还请记住，这是关于“程序员常用的软件工具”，因此属于 ***。

【参考方案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`
          ,
        ,
      ],
    ),
  ]