本文相干代码已存放在 dynamic-entry，可自行下载运用

0. 多进口 (温习)

webpack 的上风显而易见，因而在现实运用中我们也经常运用它调试 多进口 运用，所谓 多进口 是指多个HTML页面会运用多个进口文件，在官方教程 MULTIPLE ENTRY POINTS 引见了怎样设置：

{
    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
}

这里指定了 3 个进口文件，打包以后离别会在 dist 文件夹中天生 3 个打包以后的 js 文件：a.entry.js、b.entry.js、c.entry.js，可被最少 3 个差别的 HTML 页面直接援用；

上述是最基本的运用，现实中还能够运用 multiple-commons-chunks 等进步打包的速率、机能；

1. 动态 entry 的场景

像上面那样直接运用 Webpack 的多进口功用，在一般的工程项目中并不存在什么问题，还简朴高效；

但是假如你运用 Webpack 构建较大型的页面体系，遂着营业的扩展，进口的数目会逐步增添，纵使每一个进口文件都很小，在调试的时刻等一切的进口文件都 ready 所消耗的时候也是异常庞大的，让用户守候太久明显很不友爱；

用户守候时候跟着模块数目而线性增添（见下图）：

假定营业模块有100个，而当前本身仅仅须要调试 A 模块，假如运用默许的多模块进口体式格局，用户 必需等这100个模块启动以后才调试 A 模块，很明显这会让用户抓狂；

比较合理的做法是，不管当前用户模块目次下有多少个模块，默许都只其构建一个模块，当用户想要调试别的一个模块的时刻，再动态增加一个 entry 到 webpack 体系中，这就减少了用户守候的时候，进步了调试时的用户体验；

2. 完成动态 entry 的道理

如今业界并没有现成的动态 entry 计划，须要本身剖析 webpack 源码找到解决计划；（假如不清楚 webpack 流程的，能够参考 @七珏 同砚的 细说webpack之流程篇）

2.1、先剖析 webpack 源码中处置惩罚单进口的 entry 状况，在 WebpackOptionsApply.js 有：

• 这里首先是加载 EntryOptionPlugin.js 然后触发增加 entry 进口
• 然后触发 entry-option 事宜节点，将 context 和 entry 作为参数传入

2.2、 继承看 EntryOptionPlugin.js 文件，在 entry-option 事宜节点中挪用 SingleEntryPlugin 组织函数构建单进口模块：

我们能够依样画葫芦，应用官方的 SingleEntryPlugin 的对象来完成动态增加进口的功用。

1. 我们像寻常那样建立单进口文件设置文件
2. 根据 webpack(config) 猎取 compiler 实例；
3. 然后挪用 compiler.apply(new SingleEntryPlugin(process.cwd(),...); 新增一个构建进口
4. 关照 webpack 让新进口见效

3. 示例

本节的代码放在堆栈
dynamic-entry 中，能够到下载猎取

这里我们以 express 框架为例，解说怎样完成动态 entry ；具体操作步骤以下：

1. 下载 dynamic-entry 代码：git clone https://github.com/boycgit/dynamic-entry
2. cd dynamic-entry && npm install && node server.js
3. 启动 web 效劳（可接见 http://localhost:3000 ），默许只会构建一个 src/index1.js

1. 然后接见 http://localhost:3000/add，再去看命令行，你会发明如今会构建 src/index1.js 和 src/index2.js 这两个文件，这就是所谓的动态 entry

扼要剖析一下源码，在 server.js 中：

...
var SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
var webpackDevMiddleware = require('webpack-dev-middleware');

...

var webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, webpackDevMiddlewareParam);
app.use(webpackDevMiddlewareInstance); // 运用针对 express 框架的 webpack 调试中间件

...

var once = true;
// 新增进口
app.get('/add', function(req, res) {
  // 运用单进口插件
  console.log('apply SingleEntryPlugin');
  compiler.apply(new SingleEntryPlugin(process.cwd(), './src/index2.js','index2'));
  once && webpackDevMiddlewareInstance.invalidate(); // 强迫从新构建一次，不必挪用屡次，后续的触发由webpack本身 hot reload
  once = false; // 置 once 就是 false
  res.send('already apply SingleEntryPlugin');
});

• 这里用到了 webpack-dev-middleware 模块，是 webpack 调试用的 express 中间件，它供应调试时刻将构建的文件输出到文件体系，能够让用户接见猎取；
• 注册 /add 路由，当用户接见此页面的时刻会挪用 compiler.apply 新增一个构建进口
• 挪用 webpackDevMiddlewareInstance.invalidate() 强迫 webpack 从新构建一次，这个要领只须要挪用1次（因而这儿由 once 变量举行掌握），后续的触发由webpack本身 hot reload

从上面的历程可见，动态 entry 实行的历程是自创 webpack 本身的 SingleEntryPlugin 插件举行的，在可靠性方面有很大的保证；其他的代码则是借用现有的 express 中间件猎取所须要的 compiler 等对象辅佐此历程；

4. 总结

如今动态 entry 以后已运用在若干个内部构建器中，在运用动态 entry 以后，明显地改良了用户体验；

此篇文章愿望能给有相似场景的同砚供应协助；

5. 参考文章

• MULTIPLE ENTRY POINTS
• 细说webpack之流程篇
• webpack 源码剖析

下面的是我的民众号二维码图片，迎接关注。