webpack打包之 copy-webpack-plugin

**Webpack 打包之 Copy-Webpack-Plugin**

在 Webpack 的世界中，Copy-Webpack-Plugin 是一个非常有用的插件，它可以帮助我们将静态资源（如图片、字体等）从源码目录复制到输出目录。这个插件的使用场景非常广泛，例如，我们可以使用它来复制静态资源文件，如 logo.png 等。

**什么是 Copy-Webpack-Plugin**

Copy-Webpack-Plugin 是一个用于 Webpack 的插件，它允许我们在打包过程中将指定的文件或目录从源码目录复制到输出目录。这个插件可以帮助我们减少手动复制静态资源的工作量。

**如何使用 Copy-Webpack-Plugin**

要使用 Copy-Webpack-Plugin，我们需要在 Webpack 配置文件（通常是 `webpack.config.js` 文件）中添加以下代码：

javascriptconst { CopyWebpackPlugin } = require('copy-webpack-plugin');

module.exports = {
 // ...其他配置项...
 plugins: [
 new CopyWebpackPlugin({
 patterns: [
 {
 from: 'src/assets',
 to: 'assets'
 }
 ]
 })
 ]
};

在上面的代码中，我们使用 `CopyWebpackPlugin` 类创建了一个新的实例，并传入了一个 `patterns` 数组。这个数组中包含了两个对象，每个对象代表一个需要复制的文件或目录。

* `from`: 指定源码目录中的文件或目录路径。
* `to`: 指定输出目录中的目标文件或目录路径。

在我们的例子中，我们将 `src/assets` 目录下的所有文件复制到 `assets` 目录下。

**Copy-Webpack-Plugin 的配置项**

Copy-Webpack-Plugin 提供了多种配置项，帮助我们更灵活地控制复制行为。以下是常用的配置项：

* **patterns**: 这个数组中包含了一个或多个对象，每个对象代表一个需要复制的文件或目录。
* **glob**: 这是一个字符串，用于匹配源码目录中的文件或目录。
* **noProcessOutput**: 如果设置为 `true`，则不将输出内容写入控制台。

**Copy-Webpack-Plugin 的示例**

以下是 Copy-Webpack-Plugin 的一个示例：

javascriptconst { CopyWebpackPlugin } = require('copy-webpack-plugin');

module.exports = {
 // ...其他配置项...
 plugins: [
 new CopyWebpackPlugin({
 patterns: [
 {
 from: 'src/assets',
 to: 'assets'
 },
 {
 glob: '**/*.png',
 to: 'images'
 }
 ]
 })
 ]
};

在上面的代码中，我们使用 `CopyWebpackPlugin` 类创建了一个新的实例，并传入了一个 `patterns` 数组。这个数组中包含了两个对象：

* 第一个对象代表 `src/assets` 目录下的所有文件，复制到 `assets` 目录下。
* 第二个对象使用 `glob` 匹配源码目录中的所有 `.png` 文件，并将它们复制到 `images` 目录下。

**总结**

Copy-Webpack-Plugin 是一个非常有用的 Webpack 插件，它可以帮助我们在打包过程中将静态资源从源码目录复制到输出目录。通过使用 Copy-Webpack-Plugin，我们可以减少手动复制静态资源的工作量，并且可以更灵活地控制复制行为。