摘要：本文相關(guān)代碼已經(jīng)存放在，可自行下載使用多入口復(fù)習(xí)的優(yōu)勢(shì)不言而喻，因此在實(shí)際應(yīng)用中我們也常常使用它調(diào)試多入口應(yīng)用，所謂多入口是指多個(gè)頁(yè)面會(huì)使用多個(gè)入口文件，在官方教程介紹了如何配置這里指定了個(gè)入口文件，打包之后分別會(huì)在文件夾中生成個(gè)打包之后

本文相關(guān)代碼已經(jīng)存放在 dynamic-entry，可自行下載使用

webpack 的優(yōu)勢(shì)不言而喻，因此在實(shí)際應(yīng)用中我們也常常使用它調(diào)試 多入口 應(yīng)用，所謂 多入口 是指多個(gè)HTML頁(yè)面會(huì)使用多個(gè)入口文件，在官方教程 MULTIPLE ENTRY POINTS 介紹了如何配置：

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

這里指定了 3 個(gè)入口文件，打包之后分別會(huì)在 dist 文件夾中生成 3 個(gè)打包之后的 js 文件：a.entry.js、b.entry.js、c.entry.js，可被至少 3 個(gè)不同的 HTML 頁(yè)面直接引用；

上述是最基本的使用，實(shí)際中還可以使用 multiple-commons-chunks 等提高打包的速度、性能；

像上面那樣直接應(yīng)用 Webpack 的多入口功能，在普通的工程項(xiàng)目中并不存在什么問(wèn)題，還簡(jiǎn)單高效；

然而如果你使用 Webpack 構(gòu)建較大型的頁(yè)面系統(tǒng)，遂著業(yè)務(wù)的擴(kuò)大，入口的數(shù)量會(huì)逐漸增多，縱使每個(gè)入口文件都很小，在調(diào)試的時(shí)候等所有的入口文件都 ready 所耗費(fèi)的時(shí)間也是非常巨大的，讓用戶等待太久顯然很不友好；

用戶等待時(shí)間隨著模塊數(shù)量而線性增加（見(jiàn)下圖）：

假設(shè)業(yè)務(wù)模塊有100個(gè)，而當(dāng)前自己僅僅需要調(diào)試 A 模塊，如果使用默認(rèn)的多模塊入口方式，用戶 必須等這100個(gè)模塊啟動(dòng)之后才能調(diào)試 A 模塊，很明顯這會(huì)讓用戶抓狂；

比較合理的做法是，無(wú)論當(dāng)前用戶模塊目錄下有多少個(gè)模塊，默認(rèn)都只其構(gòu)建一個(gè)模塊，當(dāng)用戶想要調(diào)試另外一個(gè)模塊的時(shí)候，再動(dòng)態(tài)添加一個(gè) entry 到 webpack 系統(tǒng)中，這就減少了用戶等待的時(shí)間，提高了調(diào)試時(shí)的用戶體驗(yàn)；

目前業(yè)界并沒(méi)有現(xiàn)成的動(dòng)態(tài) entry 方案，需要自己分析 webpack 源碼找到解決方案；（如果不清楚 webpack 流程的，可以參考 @七玨 同學(xué)的 細(xì)說(shuō)webpack之流程篇）

2.1、先分析 webpack 源碼中處理單入口的 entry 情況，在 WebpackOptionsApply.js 有：

這里首先是加載 EntryOptionPlugin.js 然后觸發(fā)添加 entry 入口

然后觸發(fā) entry-option 事件節(jié)點(diǎn)，將 context 和 entry 作為參數(shù)傳入

2.2、 繼續(xù)看 EntryOptionPlugin.js 文件，在 entry-option 事件節(jié)點(diǎn)中調(diào)用 SingleEntryPlugin 構(gòu)造函數(shù)構(gòu)建單入口模塊：

我們可以依樣畫(huà)葫蘆，利用官方的 SingleEntryPlugin 的對(duì)象來(lái)完成動(dòng)態(tài)添加入口的功能。

我們像平常那樣創(chuàng)建單入口文件配置文件

依據(jù) webpack(config) 獲取 compiler 實(shí)例；

然后調(diào)用 compiler.apply(new SingleEntryPlugin(process.cwd(),...); 新增一個(gè)構(gòu)建入口

通知 webpack 讓新入口生效

本節(jié)的代碼放在倉(cāng)庫(kù) dynamic-entry 中，可以到下載獲取

這里我們以 express 框架為例，講解如何實(shí)現(xiàn)動(dòng)態(tài) entry ；具體操作步驟如下：

下載 dynamic-entry 代碼：git clone https://github.com/boycgit/dynamic-entry

cd dynamic-entry && npm install && node server.js

啟動(dòng) web 服務(wù)（可訪問(wèn) http://localhost:3000 ），默認(rèn)只會(huì)構(gòu)建一個(gè) src/index1.js

然后訪問(wèn) http://localhost:3000/add，再去看命令行，你會(huì)發(fā)現(xiàn)現(xiàn)在會(huì)構(gòu)建 src/index1.js 和 src/index2.js 這兩個(gè)文件，這就是所謂的動(dòng)態(tài) entry

簡(jiǎn)要分析一下源碼，在 server.js 中：

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

...

var webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, webpackDevMiddlewareParam);
app.use(webpackDevMiddlewareInstance); // 應(yīng)用針對(duì) express 框架的 webpack 調(diào)試中間件

...

var once = true;
// 新增入口
app.get("/add", function(req, res) {
  // 應(yīng)用單入口插件
  console.log("apply SingleEntryPlugin");
  compiler.apply(new SingleEntryPlugin(process.cwd(), "./src/index2.js","index2"));
  once && webpackDevMiddlewareInstance.invalidate(); // 強(qiáng)制重新構(gòu)建一次，不用調(diào)用多次，后續(xù)的觸發(fā)由webpack自己 hot reload
  once = false; // 置 once 就是 false
  res.send("already apply SingleEntryPlugin");
});

這里用到了 webpack-dev-middleware 模塊，是 webpack 調(diào)試用的 express 中間件，它提供調(diào)試時(shí)候?qū)?gòu)建的文件輸出到文件系統(tǒng)，可以讓用戶訪問(wèn)獲取；

注冊(cè) /add 路由，當(dāng)用戶訪問(wèn)此頁(yè)面的時(shí)候會(huì)調(diào)用 compiler.apply 新增一個(gè)構(gòu)建入口

調(diào)用 webpackDevMiddlewareInstance.invalidate() 強(qiáng)制 webpack 重新構(gòu)建一次，這個(gè)方法只需要調(diào)用1次（因此這兒由 once 變量進(jìn)行控制），后續(xù)的觸發(fā)由webpack自己 hot reload

從上面的過(guò)程可見(jiàn)，動(dòng)態(tài) entry 實(shí)施的過(guò)程是借鑒 webpack 自身的 SingleEntryPlugin 插件進(jìn)行的，在可靠性方面有很大的保障；其余的代碼則是借用現(xiàn)有的 express 中間件獲取所需要的 compiler 等對(duì)象協(xié)助此過(guò)程；

目前動(dòng)態(tài) entry 之后已經(jīng)運(yùn)用在若干個(gè)內(nèi)部構(gòu)建器中，在應(yīng)用動(dòng)態(tài) entry 之后，明顯地改善了用戶體驗(yàn)；

此篇文章希望能給有類似場(chǎng)景的同學(xué)提供幫助；

MULTIPLE ENTRY POINTS

細(xì)說(shuō)webpack之流程篇

webpack 源碼解析

下面的是我的公眾號(hào)二維碼圖片，歡迎關(guān)注。