前言
在前端工程化开发中，我们经常需要使用 webpack 对项目进行打包、压缩等操作，此时我们往往需要将打包生成的文件复制到指定的目录中，以方便后续的部署操作。在这个过程中，我们可以使用 npm 包 webpack-copy-dists-plugin 来实现这个操作。
本文将介绍如何使用 webpack-copy-dists-plugin 插件，以及该插件的详细使用教程。
插件介绍
webpack-copy-dists-plugin 是一个 webpack 插件，它可以将 webpack 打包生成的文件复制到指定的目录中。该插件的使用非常简单，只需要在 webpack 配置文件中配置该插件即可。
安装
首先，我们需要在项目中安装 webpack-copy-dists-plugin 插件，可以使用 npm 或 yarn 安装。
npm 安装：
npm install webpack-copy-dists-plugin --save-dev
yarn 安装：
yarn add webpack-copy-dists-plugin --dev
使用方法
安装完成后，我们需要在 webpack 配置文件中加入该插件。
首先，在 webpack 配置文件中引入该插件：
const WebpackCopyDistsPlugin = require('webpack-copy-dists-plugin');然后，在 plugins 配置中加入该插件的实例：
plugins: [
new WebpackCopyDistsPlugin({
from: './dist/**/*.js', // 需要复制的文件路径，支持 glob 匹配
to: './backup', // 复制到的目标路径，可以为相对路径或绝对路径
cleanTargetDir: true // 是否清空目标文件夹
})
]以上配置将会把 ./dist 目录中所有的 .js 文件复制到 ./backup 目录中，并将目标文件夹清空。如果目标文件夹不存在，则会自动创建。
除了 from 和 to，该插件还支持一些其他的选项，具体可以参考官方文档。
示例代码
以下是一个示例的 webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------------------- - -------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- ---------
--
-------- -
--- ------------------------
----- -----------------
--- -----------
--------------- ----
--
-
--以上配置文件会把 ./dist 目录中所有的 .js 文件复制到 ./backup 目录中，并将目标文件夹清空。
总结
webpack-copy-dists-plugin 是一个非常方便的 webpack 插件，它可以实现将 webpack 打包生成的文件复制到指定目录的操作。通过该插件，我们可以更加方便地进行项目的部署和发布操作。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b47c6eb7e50355dbf25