webpackはモジュール・バンドラーです。 webpackは依存関係を持つモジュールを取得し、それらをもとにして静的なアセットを生成します。

何故、別のモジュール・バンドラーが必要なのか？

既存のモジュール・バンドラーは大規模なプロジェクト(大規模なSPA)に適していません。 そして、異なるモジュールを開発するに至った最も差し迫った理由は、 コード分割とその静的なアセットをモジュールの仕組みを通じてシームレスに適合させる必要があったためです。

既存のモジュール・バンドラーの拡張を試みましたが、それでは全ての目的を果たすことが出来ませんでした。

目的

• 依存性のあるツリー構造を、読み込み時の必要性に応じてチャンク(chunk/固まり)毎に分割する。
• 初回の読み込み時間を短くする(保つ)。
• 全ての静的アセットをモジュールにすることが出来る。
• モジュールとして3rdパーティ製のライブラリを統合する機能。
• モジュール・バンドラーのほぼ全ての部分をカスタマイズする機能。
• 大規模プロジェクトに適した仕組み。

webpackは何が違うのか

コード分割

webpackは、依存関係に同期と非同期の2つの型を持ちます。 非同期依存は、分割点として動作し、新しいチャンク(chunk/固まり)を形成します。 チャンク(chunk)ツリーが最適化された後に、各チャンクに対してファイルが出力されます。

詳細は、コード分割を参照してください。

ローダー

webpackはネイティブなJavaScriptしか処理出来ませんが、ローダーは別のリソースをJavaScriptに変換するのに用いられます。 このローダーの役割によって、どんなリソースもモジュールに形成します。

詳細については、ローダーの使用方法とローダーを参照してください。

賢いパース

webpackには、ほぼ全ての3rdパーティ製のライブラリを処理することが出来る賢いパーサーが備えられています。 これは、require("./templates/" + name + ".jade")のように、依存性に式が書かれていたとしても、その依存性を処理することが出来ます。 最も一般的なモジュール形式であるCommonJs とAMD を扱います。

詳細については、依存性の式、CommonJs 、AMDを参照してください。

プラグイン・システム

webpackは、豊富なプラグイン・システムを提供します。 ほとんどの内部機能は、このプラグイン・システムを基に提供されています。 これにより、必要に応じてwebpackをカスタマイズし、 またオープンソースとしてよく使用されているプラグインへの支援(distribute)が可能になっています。

詳細については、プラグインを参照してください。

 Back to top