比較
Webpack 並不是唯一的模組打包器。如果您正在選擇使用 webpack 或以下任何打包器，以下是 webpack 與目前競爭對手相比的逐項功能比較。
| 功能 | webpack/webpack | jrburke/requirejs | substack/node-browserify | jspm/jspm-cli | rollup/rollup | brunch/brunch |
|---|---|---|---|---|---|---|
| 依需求載入額外區塊 | 是 | 是 | 否 | System.import | 否 | 否 |
AMD define | 是 | 是 | deamdify | 是 | rollup-plugin-amd | 是 |
AMD require | 是 | 是 | 否 | 是 | 否 | 是 |
AMD require 依需求載入 | 是 | 透過手動設定 | 否 | 是 | 否 | 否 |
CommonJS exports | 是 | 僅封裝在 define 中 | 是 | 是 | commonjs-plugin | 是 |
CommonJS require | 是 | 僅封裝在 define 中 | 是 | 是 | commonjs-plugin | 是 |
CommonJS require.resolve | 是 | 否 | 否 | 否 | 否 | - |
在 require 中串接 require("./fi" + "le") | 是 | 否♦ | 否 | 否 | 否 | - |
| 偵錯支援 | SourceUrl、SourceMaps | 不需要 | SourceMaps | SourceUrl、SourceMaps | SourceUrl、SourceMaps | SourceMaps |
| 相依性 | 19MB / 127 個套件 | 11MB / 118 個套件 | 1.2MB / 1 個套件 | 26MB / 131 個套件 | ?MB / 3 個套件 | - |
ES2015 import/export | 是 (webpack 2) | 否 | 否 | 是 | 是 | 是，透過 es6 模組轉譯器 |
在 require 中的表達式 (引導) require("./templates/" + template) | 是 (所有符合的檔案都包含在內) | 否♦ | 否 | 否 | 否 | 否 |
在 require 中的表達式 (自由) require(moduleName) | 透過手動設定 | 否♦ | 否 | 否 | 否 | - |
| 產生單一組合 | 是 | 是♦ | 是 | 是 | 是 | 是 |
間接 require var r = require; r("./file") | 是 | 否♦ | 否 | 否 | 否 | - |
| 個別載入每個檔案 | 否 | 是 | 否 | 是 | 否 | 否 |
| 混淆路徑名稱 | 是 | 否 | 部分 | 是 | 不需要 (路徑名稱未包含在組合中) | 否 |
| 最小化 | Terser | uglify、closure compiler | uglifyify | 是 | uglify-plugin | UglifyJS-brunch |
| 使用共用組合建立多頁面 | 透過手動設定 | 是 | 透過手動設定 | 透過組合運算 | 否 | 否 |
| 多個組合 | 是 | 透過手動設定 | 透過手動設定 | 是 | 否 | 是 |
Node.js 內建函式庫 require("path") | 是 | 否 | 是 | 是 | node-resolve-plugin | - |
| 其他 Node.js 相關 | process、__dir/filename、global | - | process、__dir/filename、global | process、__dir/filename、global (適用於 cjs) | global (commonjs-plugin) | - |
| 外掛程式 | 是 | 是 | 是 | 是 | 是 | 是 |
| 預處理 | 載入器 | 載入器 | 轉換器 | 外掛程式翻譯 | 外掛程式轉換器 | 編譯器、最佳化器 |
| 瀏覽器替代方案 | web_modules、.web.js、package.json 欄位、別名組態選項 | 別名選項 | package.json 欄位、別名選項 | package.json、別名選項 | 否 | - |
| 可要求檔案 | 檔案系統 | 網路 | 檔案系統 | 透過外掛程式 | 檔案系統或透過外掛程式 | 檔案系統 |
| 執行時間負擔 | 243B + 每個模組 20B + 每個相依性 4B | 14.7kB + 每個模組 0B + 每個相依性 (3B + X) | 415B + 每個模組 25B + 每個相依性 (6B + 2X) | 自執行套件 5.5kB、完整載入器和多載 38kB、0 個一般模組、293B CJS、139B ES2015 System.register（壓縮前） | ES2015 模組無負擔（其他格式可能會有） | - |
| 監控模式 | 是 | 不需要 | watchify | 開發中不需要 | rollup-watch | 是 |
♦ 在生產模式中（開發模式中相反）
X 是路徑字串的長度
套件化與載入
注意載入和套件化模組之間的一些主要差異非常重要。像 SystemJS 這樣的工具（可以在 JSPM 的底層找到）用於在瀏覽器中載入和轉譯執行時間模組。這與 webpack 有很大的不同，其中模組在進入瀏覽器之前會透過「載入器」轉譯（套件化）。
每種方法都有其優缺點。在執行期間載入和轉譯模組會為包含許多模組的大型網站和應用程式增加許多負擔。因此，SystemJS 對於需要較少模組的小型專案更有意義。不過，這可能會有些改變，因為 HTTP/2 會提升檔案從伺服器傳輸到用戶端的速率。請注意，HTTP/2 沒有改變模組的「轉譯」方式，而這在用戶端執行時總是會花較長的時間。
下一頁 »
很棒的 webpack6 貢獻者
