在 Webpack 打包时，我们经常会遇到需要将多个入口文件打包成一个文件的情况，这时就需要使用 Webpack 的 splitChunks 或者 optimization.splitChunks 配置来实现代码拆分。但是，当需要将某些入口文件合并到一个文件中时，Webpack 就无法直接实现了。这就需要使用 split-by-name-webpack-plugin 这个 NPM 包。
split-by-name-webpack-plugin 可以根据指定的入口名称，将多个入口文件合并成一个输出文件。这个包非常适用于多个页面共用同一个 JavaScript 基础库的情况。
接下来，我将详细介绍如何使用这个 NPM 包。
安装和使用
安装
split-by-name-webpack-plugin：npm install split-by-name-webpack-plugin --save-dev
在 Webpack 配置文件中添加以下配置：
-- -------------------- ---- ------- ----- ----------------- - ---------------------------------------- -------------- - - -- ------- -------- - --- ------------------- ------ ----------- ---------- -------- -- - --
names 参数是一个数组，其中的每一项都是入口的名称。在这个例子中，我们将多个入口文件合并到了一个名为 vendor.js 的文件中。
minChunks 参数用于指定模块只有在被使用了多少次后才会被分割成单独的模块，设为 Infinity 表示只有使用了该模块的代码会被提取到 vendor.js 中。
示例代码
以下是一个简单的 Webpack 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ----------------- - ----------------------------------------
-------------- - -
----- -------------
------ -
---- ---------------
------- ------------------
------- --------- ------------ ---------
--
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
--
-------- -
--- -------------------
--------- ------------------
---
--- -------------------
------ -----------
---------- --------
--
-
--在这个示例中，入口文件被分为三个：
app.js：应用程序的主要代码。common.js：公共的 JavaScript 代码。vendor.js：引用 React、React DOM 和 jQuery 三个库的代码。
使用 SplitByNamePlugin，我们将最后一个入口 vendor.js 合并到了一个单独的文件中。
除了上述的简单用例外，split-by-name-webpack-plugin 还有很多其他的用法和配置选项，可根据具体情况进行调整。
总结
使用 split-by-name-webpack-plugin，可以方便地将多个入口文件合并到一个输出文件中，在使用 React、jQuery 等常用基础库时，这个包尤其有用。希望本文对你使用该插件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a48ccae46eb111f0f1