介绍
在前端开发中，我们会使用大量的第三方库、插件等，这些都需要通过 npm 安装。在打包时，我们需要使用 Webpack、Rollup 等工具把它们打包成一起，以减少网络请求的次数，提高性能。
而 bundle-files-plugin 就是一个用来帮助我们更方便地打包文件的 Webpack 插件。它可以将指定文件打包成一个文件，生成 source map，还支持对生成的文件进行修改等操作。
本文将详细介绍 bundle-files-plugin 的使用方法，并通过示例代码来说明其具体应用。
安装
使用 npm 进行安装：
npm install bundle-files-plugin --save-dev
使用
在 webpack.config.js 中配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ ------------ ------------
------- -----------------
---------- -----
---
--
--参数说明
files
需要打包的文件，格式为数组。
output
打包后的文件输出路径。
sourceMap
是否生成 source map。
beforeBundle
在打包前需要执行的操作，接受一个函数作为参数。
afterBundle
在打包后需要执行的操作，接受一个函数作为参数。
示例代码
例如我们有 2 个文件，分别是 src/1.js 和 src/2.js，内容如下：
src/1.js：
export const a = 1;
src/2.js：
import { a } from './1.js';
console.log(`a:${a}`);我们需要把它们打包成一个文件。
在 webpack.config.js 中配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---- - ----------------
-------------- - -
------ -
----- -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ ------------ ------------
------- -----------------
---------- -----
------------ ---------- ------------ -- -
-- ----------
----- ----- - -------------------------------------
----- ------ - ---------------------------- -------
------------ - -- -- -------
---------- - -- -- --------------
--
---
--
--通过这样配置，在运行 webpack 打包命令后，输出的 dist/bundle.js 文件内容如下：
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=2)}([,,,function(e,t,n){"use strict";n.r(t),n.d(t,"a",(function(){return r}));var r=1}],function(e,t,n){"use strict";n.r(t);n(0),console.log("a:one")},,]); //# sourceMappingURL=bundle.js.map我们可以发现，文件中的数字 1 已经被替换成了单词 one。
总结
bundle-files-plugin 是一个非常简单实用的 Webpack 插件，它能够帮助我们更好地打包文件，节约页面请求次数，提高网页性能。
在使用时，我们可以通过配置参数、编写钩子函数等进行更加灵活的控制，使其更加符合业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8dccdc64669dde5579