webpack は、 JavaScript用の無料のオープンソースのモジュールバンドラーです。[ 5 ] [ 6 ] [ 7 ] [ 8 ]主に JavaScript 用に作られていますが、対応するローダーが含まれている場合は、HTML、CSS、画像などのフロントエンドのアセットを変換することもできます。[ 9 ] webpack は依存関係のあるモジュールを受け取り、それらのモジュールを表す静的アセットを生成します。[ 10 ]
webpackは依存関係を取得し、依存関係グラフを生成することで、Web開発者がWebアプリケーション開発においてモジュール方式を採用できるようにします。コマンドラインから実行することも、webpack.config.jsという名前の設定ファイルを使用して構成することもできます。このファイルでは、プロジェクトのルールやプラグインなどを定義します。(webpackはルールによって高度に拡張可能であり、開発者はファイルをバンドルする際に実行したいカスタムタスクを記述できます。)
webpackを使用するにはNode.jsが必要です。
webpack は、コード分割という名称を使用して、必要に応じてコードを提供します。動的なコード分割に関しては、webpack は 2 つの類似した手法をサポートしています。最初の推奨される方法は、動的インポートに関するECMAScript の提案に準拠したimport()構文を使用することです。従来の webpack 固有の方法は、require.ensure を使用することです。[ 11 ]
webpackには、開発中にファイルを配信するためのHTTPサーバーとして使用できる組み込みの開発サーバー、webpack-dev-serverも用意されています。また、開発者がページを再読み込みすることなくWebページのコードを更新できるホットモジュールリプレイスメント(HMR)機能も提供しています。