在前端开发中，我们经常需要将我们编写的前端代码打包成压缩文件进行传递或部署。在 Webpack 中，有一个非常方便的插件 zip-webpack-plugin 可以帮助我们将打包出来的文件进行压缩，简化了部署流程。本文将介绍如何使用 zip-webpack-plugin 插件。
安装插件
首先我们需要安装插件:
npm install zip-webpack-plugin --save-dev
使用插件
在 webpack.config.js 文件中，我们需要引入 zip-webpack-plugin：
const ZipWebpackPlugin = require('zip-webpack-plugin');然后在 plugins 中添加：
plugins: [
new ZipWebpackPlugin({
path: path.join(__dirname, '../'),
filename: '${PKG_NAME}.zip',
}),
]其中，path 指定要压缩的文件夹所在的路径，filename 指定压缩后文件的名称。这里的文件名中，${PKG_NAME} 是我们在 package.json 文件中定义的项目名称（通过 npm init 命令生成）。这里我们也可以自定义一个名称，例如 project-name.zip。
除了上面的必选项，我们还可以配置其他选项：
-- -------------------- ---- -------
--- ------------------
----- -------------------- -------
--------- ------------------
-------- --------
-------- ---------
----- ---------- -------- -- -
-------------------- ----- ------------ --- ----- -------------
--
--exclude和include：可以指定需要排除或者需要包含的文件，可以是 RegExp 或模块名称；walk：是一个回调方法，可以自定义遍历文件夹的方式；
示例代码
这里给出一个完整的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------------- - ------------------------------
----- -------- - -------------------------------
-------------- - -
-- ---
-------- -
--- ------------------
----- -------------------- -------
--------- ------------------
-------- --------
-------- ---------
----- ---------- -------- -- -
-------------------- ----- ------------ --- ----- -------------
--
---
--
--总结
zip-webpack-plugin 插件能够帮助我们简化部署流程，非常方便实用。通过本文的介绍，相信大家对该插件已经有了一定的了解。在下一次打包部署前，可以尝试使用该插件，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/170462