前言
当前在前端开发中，Webpack 是一个非常重要的工具，它可以使我们的代码尽可能地优化，同时提升项目的效率。但是，我们在使用 Webpack 的时候也遇到了一些问题，比如在打包多个入口文件的时候，需要手动重复配置多个 entry、output，这样不仅麻烦，而且容易出错。而我们就可以借助 webpack-integration-plugin 来解决这个问题。
webpack-integration-plugin 是一个用于 Webpack 的插件，能够将多个入口文件打包为多个子包，进而提升打包效率。下面就详细讲解一下如何使用该插件。
安装
首先，我们需要在项目中安装这个 npm 包，可以通过以下命令进行安装：
npm install webpack-integration-plugin --save-dev
配置
接下来，我们需要对 Webpack 进行配置，使用 webpack-integration-plugin 之前，我们需要在入口文件中为每个入口配置一个名称。示例代码如下：
-- -------------------- ---- -------
-------------- - -
------ -
----- ----------------
------ -----------------
---
--
------- -
----- ---------
--------- ------------
--
---
--其中，main 和 login 分别是入口的名称，在多个入口文件的情况下，我们需要为每个入口文件加上一个名称。接下来，我们就可以配置 webpack-integration-plugin 了。示例代码如下：
-- -------------------- ---- -------
----- ------------------------ - --------------------------------------
-------------- - -
-------- -
--- --------------------------
--------- ------------
---------- --
------------ -
------ -
----- --------
--
---
--
---
---
--
--其中，我们需要给 webpackIntegrationPlugin 这个插件传递一个对象，这个对象中包含四个属性：
filename
作用：设置子包 bundle 的名称。可以使用 [name] 占位符，它会被替换为入口文件的名称。
{
filename: '[name].js',
}minChunks
作用：当模块被使用多少次时，才会被引入到子包中。
{
minChunks: 2,
}subPackages
作用：根据条件将模块打包到子包中。
{
subPackages: {
login: {
test: /login/,
},
...
},
}其中，subPackages 是一个对象，这个对象中包含多个属性，每个属性都对应一个子包。下面以 login 为例，讲解子包的创建。
login 对应的对象是：
login: {
test: /login/,
},其中，test 属性是一个正则表达式，用于匹配需要打包到 login 子包中的模块。这里用的是 /login/，它会匹配所有文件名中含有 login 的模块。
如果我们只想打包某个文件，可以使用 include 属性，如下：
login: {
include: /src\/login/,
},这样就只会将符合 /src/login/ 正则表达式的文件打包到 login 子包中了。
如果我们想要将某个文件排除在外，可以使用 exclude 属性，如下：
login: {
exclude: /src\/login\/index\.js/,
},这样会排除 index.js 文件，其他文件都会打包到 login 子包中。
注意：在创建子包时，也要为其在 entry 中指定入口文件，否则打包时会报错。
chunks
作用：可以手动指定将哪些入口文件打包为子包。默认情况下，webpack-integration-plugin 会将所有符合条件的模块打包为子包。
{
chunks: ['main', 'login'],
}示例
下面给出一个完整的例子，让大家更好地理解如何使用 webpack-integration-plugin。
-- -------------------- ---- -------
-- -----------------
----- ------------------------ - --------------------------------------
-------------- - -
----- -------------
------ -
----- ----------------
------ -----------------
----- ----------------
------ -----------------
------ -----------------
--
------- -
----- ---------
--------- ------------
----------- --------
--
-------- -
--- --------------------------
--------- ------------
---------- --
------------ -
------ -
-------- -------------
--
----- -
----- ------------
--
------ -
------- --------- ---------
--
--
---
--
--结合上面的配置，我们可以看到，在 subPackages 中，我们创建了三个子包：login、user、pages，然后我们用 include 和 test 指定了需要打包到各个子包中的文件。
注意：webpack-integration-plugin 目前尚处于 Beta 版本，建议使用时进行测试，以免出现问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a530d09270238224b8