如果你在使用 webpack 进行前端工程化项目开发的时候，你可能需要将一些文件合并成一个文件，比如将多个 CSS 文件打包成一个 CSS 文件，同样的需要将多个 JS 文件打包成一个 JS 文件。这时候，join-webpack-plugin 这个 npm 包就可以派上用场了。
join-webpack-plugin 简介
join-webpack-plugin 是一个 webpack 插件，它可以将多个文件合并成一个文件，免去手动合并的麻烦。该插件可以将入口文件指定的 chunk 文件合并成一个文件，也可以将多个文件合并成一个文件，同时支持文件压缩。
join-webpack-plugin 安装
我们可以用 npm 安装 join-webpack-plugin，使用如下指令：
npm install join-webpack-plugin --save-dev
join-webpack-plugin 配置
我们需要将 join-webpack-plugin 添加到 webpack 的配置文件中，示例如下：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- ------
------ -
----- -----------------
------ ----------------
--
-- ------
------- -
--------- ------------------------
----- ----------------------- -------
--
-- ----
-------- -
--- -------------------
------ -
------ ------------------- ------------ ------
------ ------------------- ------------ -------
------ ------------------- --------- ------
------ ------------------- --------- ------ ------------ -----
-
--
-
--以上配置文件说明如下：
- 入口文件配置：我们需要将需要合并的多个文件都在入口文件中进行配置。
- 输出文件配置：我们需要指定输出文件名和路径。
- 插件配置：我们需要创建一个 join-webpack-plugin 实例，将需要合并的文件路径和是否压缩进行配置。
join-webpack-plugin 使用方法
我们可以在 webpack 编译过程中触发 join-webpack-plugin，将需要合并的文件合并成一个文件。同时，我们还可以通过配置将文件进行压缩。
在 webpack 入口文件中加入以下代码即可完成合并：
import './path/to/file1.js'; import './path/to/file2.js'; import './path/to/file3.js'; import './path/to/file4.js';
最终通过 webpack 打包后将会生成单文件，并且支持压缩。
join-webpack-plugin 参数说明
我们可以在创建 join-webpack-plugin 实例时设置以下参数：
- files：合并文件的配置数组，每个配置项包括文件路径、是否压缩、出错时是否忽略以及合并后文件的命名。示例代码如下：
[
{path: 'path/to/file1.js', ignoreError: true},
{path: 'path/to/file2.js', ignoreError: false},
{path: 'path/to/file3.js', compress: true},
{path: 'path/to/file4.js', compress: false, ignoreError: true, name: 'my-file'}
]join-webpack-plugin 实例
我们可以通过下面的实例来了解 join-webpack-plugin 的使用方法。
在 package.json 中添加如下代码：
-- -------------------- ---- -------
-
---------- -
-------- ---------
--
------------------ -
---------- ---------
---------------------- --------
-
-在 src 目录下创建一个 index.js 文件，代码如下：
console.log('Hello join-webpack-plugin!');在 src 目录下创建一个 common.js 文件，代码如下：
function add(a, b) {
return a + b;
}
console.log(add(1, 2));在 webpack.config.js 中加入以下代码：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
---- -----------------
------- -----------------
--
-------- -
--- -------------------
------ -
------ ---------------- --------- ------
------ ----------------------- ------------ ------
------ ----------------------- ----- ---------
-
--
--
------- -
----- ----------------------- --------
--------- -----------------------
-
--在 dist 目录下生成了三个文件，分别是 app 和 common 两个入口文件生成的文件以及 vendor/lodash.min.js 和流程中加入的 src/common.js 合成的 my-lib.js。
总结：
我们通过 join-webpack-plugin 插件，实现了将多个文件合并成一个文件，极大的减少了前端工程化开发中手动合并的繁琐工作。当然，在实际项目开发中，可能还需要更多的插件来协助我们完成前端项目开发。但是 join-webpack-plugin 作为一个非常实用的插件，对于我们的前端项目开发来说，确实是个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571e81e8991b448d40ec