webpack插件: CopyWebpackPlugin

CopyWebpackPlugin

npm地址： https://www.npmjs.com/package/copy-webpack-plugin

一、背景

在构建 Web 应用程序时，通常需要将一些静态文件（如 HTML、CSS、图片等）从源目录复制到构建目录。为了实现这一功能，我们可以使用 CopyWebpackPlugin。这个插件可以将源文件复制到构建目录，并且可以自定义复制行为

二、作用

CopyWebpackPlugin 是一个强大的 Webpack 插件，用于将文件从源目录复制到构建目录。
适用于需要将静态资源从源目录复制到构建目录的场景。
有效地管理和复制项目中的静态资源，优化构建过程和输出结果。
明确指定源路径和目标路径‌：确保从正确的源路径复制文件到目标路径。
‌使用转换函数‌：在复制前对文件进行必要的转换，如压缩、重命名等。
‌合理配置并发数‌：根据项目大小和构建速度需求，合理设置并发复制的文件数，以优化构建性能。
‌覆盖已存在的文件‌：根据需要设置overwrite选项，决定是否覆盖已存在的目标文件。

三、安装

npm install copy-webpack-plugin --save-dev
# 或者
yarn add -D copy-webpack-plugin

四、常用API和配置选项

• patterns‌：一个数组，包含要复制的源文件和目标文件的信息。每个元素都是一个对象，包含from（源文件路径或模式）、to（目标文件路径）、transform（转换函数）等属性。
• ‌from‌：源文件路径或模式，可以是字符串或正则表达式。
• to‌：目标文件路径，可以是字符串或函数。
• ‌transform‌：一个函数，用于在复制文件之前对源文件进行转换。
• ‌options‌：包含一些全局选项，如concurrency（并发复制的文件数）和overwrite（是否覆盖已存在的文件）。
• ‌filter‌：用于过滤要复制的文件。

四、示例

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/static', to: 'static' }, // 将src/static目录下的文件复制到输出目录的static文件夹中
        // 可以配置多个复制规则
      ],
    }),
  ],
};