前言
在前端开发过程中，我们常常需要将各个模块打包成可部署的包。而 webpack-pkg-plugin 就是一个可以帮助我们将 webpack 打包的文件打包成可部署的包的 npm 包。下面将会为大家介绍如何使用 webpack-pkg-plugin。
安装
可以通过 npm 进行安装：
npm install webpack-pkg-plugin --save-dev
使用
在使用之前，需要先安装 webpack：
npm install webpack --save-dev
在 webpack 中引用 webpack-pkg-plugin，可以配置成以下方式：
-- -------------------- ---- -------
----- --------- - ------------------------------
-------------- - -
-- ---
-------- -
--- -----------
-- ---
--
-
-通过 PkgPlugin 的构造函数设置选项。下面是一些可用的选项：
filename: 输出文件名，默认为pkg.zip。outputPath: 输出文件的路径，默认为 webpack 配置文件中的output.path。excludes: 不需要被包含的文件/文件夹列表，可以传入 glob 字符串。
new PkgPlugin({
filename: 'myapp.zip',
excludes: ["node_modules", "**/*.log", "*.md"]
})Demo
假设我们有一个项目结构如下：
- node_modules
- src
- index.js
- package.json
- webpack.config.js我们可以在 webpack.config.js 中添加如下配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ------------------------------
-------------- - -
------ -----------------
-------- -------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -----------
--------- ------------
--------- ----------------
--
-
--运行 npm run build 后，会生成 dist 文件夹和 myapp.zip 压缩包。其中，dist 文件夹中包含了打包后的文件，而 myapp.zip 中包含了 dist 文件夹下所有文件（除了 node_modules 文件夹）和 package.json 文件。
小结
通过本文，我们介绍了如何使用 webpack-pkg-plugin 将 webpack 打包的文件打包成可部署的包。希望本文能对你在前端开发中使用 webpack-pkg-plugin 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e4881e8991b448dbba8