摘要:本文相關代碼已經存放在,可自行下載使用多入口復習的優勢不言而喻,因此在實際應用中我們也常常使用它調試多入口應用,所謂多入口是指多個頁面會使用多個入口文件,在官方教程介紹了如何配置這里指定了個入口文件,打包之后分別會在文件夾中生成個打包之后
本文相關代碼已經存放在 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 的對象來完成動態添加入口的功能。
我們像平常那樣創建單入口文件配置文件
依據 webpack(config) 獲取 compiler 實例;
然后調用 compiler.apply(new SingleEntryPlugin(process.cwd(),...); 新增一個構建入口
通知 webpack 讓新入口生效
3. 示例本節的代碼放在倉庫 dynamic-entry 中,可以到下載獲取
這里我們以 express 框架為例,講解如何實現動態 entry ;具體操作步驟如下:
下載 dynamic-entry 代碼:git clone https://github.com/boycgit/dynamic-entry
cd dynamic-entry && npm install && node server.js
啟動 web 服務(可訪問 http://localhost:3000 ),默認只會構建一個 src/index1.js
然后訪問 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 源碼解析
下面的是我的公眾號二維碼圖片,歡迎關注。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/81124.html
摘要:前言本文基于,主要涉及基本概念基本配置和實際項目打包優化。關于概念方面參考官網,常用配置來自于網絡資源,在文末有相關參考鏈接,實踐部分基于自己的項目進行優化配置。同一文件中,修改某個影響其他。 前言:本文基于weboack4.x,主要涉及webpack4 基本概念、基本配置和實際項目打包優化。關于概念方面參考官網,常用配置來自于網絡資源,在文末有相關參考鏈接,實踐部分基于自己的項目進行...
摘要:安裝配置加載器配置配置文件配置支持自定義的預設或插件只有配置了這兩個才能讓生效,單獨的安裝是無意義的。 showImg(https://segmentfault.com/img/bVbjGNY?w=2847&h=1931); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你! 最新React全家桶實戰使用配置指南 這篇文檔 是呂小明老師結合以往的項目經驗 加上自己本身...
摘要:體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點之前構建工具的選擇上,公司也是很早之前就從收攏為的確是個好工具,作為工具核心的依賴表是非常好的構建思路,也是很多大公司一直在用的構建工具但是個人用的非常不習慣生態不是很好它太大太重 Webpack體驗記錄 webpack大法好 退fis保平安 打包工具前端工程化一直是前端的一塊重點.之前構建工具的選擇上,公司也是很早之前就從g...
摘要:體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點之前構建工具的選擇上,公司也是很早之前就從收攏為的確是個好工具,作為工具核心的依賴表是非常好的構建思路,也是很多大公司一直在用的構建工具但是個人用的非常不習慣生態不是很好它太大太重 Webpack體驗記錄 webpack大法好 退fis保平安 打包工具前端工程化一直是前端的一塊重點.之前構建工具的選擇上,公司也是很早之前就從g...
閱讀 3544·2021-09-10 10:51
閱讀 2518·2021-09-07 10:26
閱讀 2495·2021-09-03 10:41
閱讀 821·2019-08-30 15:56
閱讀 2909·2019-08-30 14:16
閱讀 3497·2019-08-30 13:53
閱讀 2113·2019-08-26 13:48
閱讀 1925·2019-08-26 13:37