前端开发中，如果需要将 Webpack 打包后的产物分为两类：精品资源和非精品资源，即最终需要处理出两个打包产物。这时就需要采用 @zmb-gmbh/assets-webpack-plugin 插件。
什么是 @zmb-gmbh/assets-webpack-plugin 插件
@zmb-gmbh/assets-webpack-plugin 是一个 Webpack 插件，目的是将打包产物分为精品资源和非精品资源，即最终需要处理出两个打包产物。
安装
安装命令：
npm i @zmb-gmbh/assets-webpack-plugin --save-dev
使用
下面通过示例详细介绍如何使用 @zmb-gmbh/assets-webpack-plugin。
示例代码
首先需要在 Webpack 的配置文件中引入插件：
-- -------------------- ---- -------
----- ------------------- - -------------------------------------------
----- ---- ------- ----
-------------- - -
-- -------------------------
-------- -
-- --------------------------------
--- ---------------------
--------- -------------- -- -----
-------------- -------- -- -
----- ------- - ---
--- ------ ----- ------ -- ----------------------- -
-- ---------- -
------------ - ---------
-
-
------ ------------------------
--
------------ -----
--
--
-假设在某个目录下有 Foo.vue、Bar.js 等文件，需要按照自定义规则分别打包成精品资源和非精品资源，那么需要在 webpack.config.js 中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- -------------------------
-------- -
-- --------------------------------
--- ---------------------
--------- -------------- -- -----
-------------- -------- -- -
----- ------- - ---
--- ------ ----- ------ -- ----------------------- -
-- ------------------------ - -- - ---- ------------
-------------- - ---------------------
- ---- - -- ------------
------------ - ---------
-
-
------ ------------------------
--
------------ -----
--
--
-重点在于 processOutput 函数：
- 遍历所有的打包资源
- 如果资源名以
foo.开头，则将其打包到名为"foo"的产物中，否则打包到默认产物中 - 最后通过
JSON.stringify转化成字符串
此时，当运行 Webpack 打包命令时，会在输出目录下生成一个 assets.json 文件，该文件的内容如下：
{
"main": "main.js",
"vendors~main": "vendors~main.js",
"foo": "foo.js"
}其中 main 和 vendors~main 是默认产物，foo 是自定义规则产生的产物。
总结
@zmb-gmbh/assets-webpack-plugin 是一个方便实用的 Webpack 插件，用于将打包后的产物分为精品资源和非精品资源。通过本文所介绍的示例代码，可以快速上手使用该插件，并可以通过修改 processOutput 函数来实现自定义规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005676a81e8991b448e3d96