比較
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、ソースマップ | 不要 | ソースマップ | SourceUrl、ソースマップ | SourceUrl、ソースマップ | ソースマップ |
| 依存関係 | 19MB / 127パッケージ | 11MB / 118パッケージ | 1.2MB / 1パッケージ | 26MB / 131パッケージ | ?MB / 3パッケージ | - |
ES2015 import/export | はい (webpack 2) | いいえ | いいえ | はい | はい | はい、es6 module transpiler経由 |
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） | - |
| プラグイン | はい | はい | はい | はい | はい | はい |
| 前処理 | ローダー | ローダー | 変換 | plugin translate | plugin transforms | コンパイラ、オプティマイザ |
| ブラウザの代替 | 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、CJSは293B、gzip前のES2015 System.registerは139B | ES2015モジュールの場合なし（他の形式にはある可能性があります） | - |
| ウォッチモード | はい | 不要 | watchify | 開発では不要 | rollup-watch | はい |
♦本番モードの場合（開発モードでは逆）
Xはパス文字列の長さです
バンドル vs. ローディング
モジュールのローディングとバンドリングの間にはいくつかの重要な違いがあることに注意することが重要です。SystemJS（JSPMの内部で使用されている）のようなツールは、ブラウザで実行時にモジュールをロードしてトランスパイルするために使用されます。これは、モジュールが「ローダー」を介してトランスパイルされ、ブラウザに到達する前にバンドルされるWebpackとは大きく異なります。
それぞれに長所と短所があります。実行時にモジュールをロードしてトランスパイルすると、多くのモジュールで構成される大規模なサイトやアプリケーションでは大きなオーバーヘッドが発生する可能性があります。このため、SystemJSは、必要なモジュールが少ない小規模なプロジェクトの方が理にかなっています。ただし、HTTP/2により、ファイルがサーバーからクライアントに転送される速度が向上するため、これは多少変化する可能性があります。HTTP/2はモジュールのトランスパイルについては何も変更しません。クライアント側で行う場合は、常に時間がかかります。
次へ »
素晴らしいwebpack6 貢献者
