当前位置：首页 > news >正文

webpack：详解CopyWebpackPlugin，复制的同时修改文件内容

news 2025/7/18 2:56:30

摘要

CopyWebpackPlugin 是一个强大的 Webpack 插件，用于将文件从源目录复制到构建目录。在本文中，我们将探讨 CopyWebpackPlugin 的一些常用 API，并提供示例代码。

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

常用 API

patterns：一个数组，包含要复制的源文件和目标文件的信息。每个数组元素都是一个对象，其中包含以下属性：

from：源文件路径或模式。可以是字符串或正则表达式。
to：目标文件路径。可以是字符串或函数。
toType：目标文件类型。可以是 'file' 或 'dir'。默认值是 'file'。
flatten：是否将源文件复制到目标文件的子目录中。默认值是 false。
transform：一个函数，用于在复制文件之前对源文件进行转换。

options：一个对象，包含一些全局选项，如 concurrency（并发复制的文件数）和 overwrite（是否覆盖已存在的文件）。
filter：

示例

下面是一个简单的 CopyWebpackPlugin 配置示例：

const CopyPlugin = require('copy-webpack-plugin');module.exports = {plugins: [new CopyPlugin({patterns: [{from: 'src/index.html',to: 'dist/index.html'},{from: 'src/assets',to: 'dist/assets'},{from: 'src/images',to: 'dist/images',toType: 'dir'},{from: 'src/styles.css',to: 'dist/styles.css',transform: (content, path) => minifyCSS(content)},{from: '**/*',to: './',globOptions: {ignore: ['**/*.js', '**/*.scss', '**/*.ts']}},{from: "public/**/*",filter: async (resourcePath) => {const data = await fs.promises.readFile(resourcePath);const content = data.toString();if (content === "my-custom-content") {return false;}return true;},},],options: {concurrency: 10,overwrite: true}})]
};

在这个示例中，我们创建了一个 CopyWebpackPlugin 实例，并指定了要复制的文件和目录。第一个模式将 src/index.html 文件复制到 dist/index.html 文件，第二个模式将 src/assets 目录复制到 dist/assets 目录，第三个模式将 src/images 目录复制到 dist/images 目录，第四个模式将 src/styles.css 文件复制到 dist/styles.css 文件，并在复制之前对内容进行转换（例如，压缩 CSS）。我们还指定了一些全局选项，如并发复制的文件数和是否覆盖已存在的文件。