コンセプト

https://webpack.js.org/concepts/の日本語訳。

webpack は、最新の JavaScript アプリケーションの為の静的モジュールバンドラーです。
webpack がアプリケーションを処理するとき、プロジェクトが必要とするすべてのモジュールを整理して、 1 つ以上のバンドルを生成する依存グラフを内部的に構築します。

JavaScript モジュールと Webpack モジュールの詳細については、こちらをご覧ください。

バージョン4.0.0以降、 webpack はプロジェクトをバンドルするための構成ファイルを必要としません。
しかし、開発者のニーズに合わせて設定することができ、驚くべきカスタマイズ性を有しています。
よりよく合うように柔軟に設定することができます。
webpack の利用を開始するには、中核となるコンセプトを理解するだけで十分です。

このドキュメントは、個々のコンセプトの使用例のリンクを提供すると共に、コンセプトの概要を説明することを目的としています。
モジュールバンドラーの背後にある思想と、内部でどのように機能するかについての理解を深めるには、次のリソースを参照してください。

エントリー

エントリポイントは、内部依存関係グラフの構築を開始するために Webpack が使用する必要があるモジュールを示します。
webpack は、そのエントリポイントが(直接的および間接的に)依存している他のモジュールとライブラリを特定します。
デフォルト値は ./src/index.jsです。
しかし webpack の設定で entryプロパティを指定することで、異なる(または複数のエントリーポイント)を指定できます。例えば:

webpack.config.js

module.exports={entry:'./path/to/my/entry/file.js'};

詳細はエントリポイントのセクションをご覧ください。

出力

outputプロパティは、バンドルファイルを出力する場所とファイルの命名規則を webpack に指示します。
デフォルトでは、メインの出力ファイルは ./dist/main.js、他の出力ファイルは ./distフォルダーになります。
設定で outputフィールドを指定することにより、ファイルの出力先と命名規則を設定することができます。

webpack.config.js

constpath=require('path');module.exports={entry:'./path/to/my/entry/file.js',output:{path:path.resolve(__dirname,'dist'),filename:'my-first-webpack.bundle.js'}};

上記の例では、 output.filenameプロパティと output.pathプロパティを使用して、バンドルの名前と出力先を webpack に指示しています。
一番上にインポートされている path モジュールは、ファイルパスの操作に使用される Node.js のコアモジュールです。

output プロパティは、もっと多くの設定機能を有しています。
その背後にあるコンセプトについて学びたい場合は、 outputセクションをご覧ください。

ローダー

デフォルトでは webpack は JavaScript ファイルと JSON ファイルのみを認識します。
ローダーを使用すると、 webpack は他のタイプのファイルを処理し、それらを有効なモジュールに変換してアプリケーションにおいて使用し、依存関係グラフに追加することができます。

どのタイプのモジュールでもインポートできることに注意してください。
.cssファイルは webpack に固有の機能であり、他のバンドラーやタスクランナーではサポートされていない場合があります。
開発者がより正確な依存関係グラフを作成できるようにするため、 CSS 言語の拡張は正当化されると私たちは考えています。

webpack のローダー設定には大まかに 2 つのプロパティがあります。

testプロパティは変換するファイルを識別します。
useプロパティは変換を行うために使用するローダーを示します。

webpack.config.js

constpath=require('path');module.exports={output:{filename:'my-first-webpack.bundle.js'},module:{rules:[{test:/\.txt$/,use:'raw-loader'}]}};

上記の設定では、 testと useの 2 つの必須プロパティを持つ単一モジュールの rulesプロパティを定義しています。
これは webpack のコンパイラに次のように指示します。

「やあ、 webpack コンパイラー。 require()/importステートメント内の .txtファイルに解決されるパスに遭遇したとき、バンドルに追加する前に raw ローダーを使用して変換してくれ」

webpack の設定でルールを定義するときは、 rulesではなく module.rulesでルールを定義していることを覚えておくことが重要です。
開発者の利益のために、設定が誤っている場合、 webpack は警告を出します。

正規表現を使用してファイルを照合する場合は、引用符で囲まない場合があることに注意してください。
つまり、 /\.txt$/は '/\.txt$/'または "/\.txt$/"と同じではありません。
前者は .txtで終わるすべてのファイルに一致するように webpack に指示し、後者は絶対パス '.txt'を持つ単一のファイルに一致するように webpack に指示します。
これはおそらくあなたの意図するところではないでしょう。

ローダーについての詳細はローダーセクションをご覧ください。

プラグイン

ローダーは特定のタイプのモジュールの変換に使用されますが、プラグインを利用して、バンドルの最適化、アセットの管理、環境変数の注入などの幅広いタスクを実行することができます。

プラグインを使用して Webpack の機能を拡張する方法についてはプラグインインターフェイスをご覧ください。

プラグインを使用するには、プラグインを require()してプラグイン配列に追加する必要があります。
ほとんどのプラグインはオプションを通じてカスタマイズ可能です。プラグインはさまざまな用途で複数回使用できるため、 new演算子を使用して呼び出し、プラグインのインスタンスを作成する必要があります。

webpack.config.js

constHtmlWebpackPlugin=require('html-webpack-plugin');// npm を介してインストールconstwebpack=require('webpack');// 組込みプラグインを利用するmodule.exports={module:{rules:[{test:/\.txt$/,use:'raw-loader'}]},plugins:[newHtmlWebpackPlugin({template:'./src/index.html'})]};

上記の例では、 html-webpack-pluginは、生成されたすべてのバンドルを自動的に挿入し、アプリケーションの HTML ファイルを生成します。

すぐに使える webpack のプラグインはたくさんあります!
プラグインの一覧をご覧ください。

Webpack の設定でプラグインを使用するのは簡単です。
しかし、さらに知っておく価値のある多くのユースケースがあります。
詳しくはこちらをご覧ください。

モード

modeパラメーターを development、 production、または noneのいずれかに設定することにより、各環境に対応する Webpack の組み込み最適化を有効にすることができます。
デフォルト値は productionです。

module.exports={mode:'production'};

mode の詳細と、どのような最適化が行われるかについてはこちらをご覧ください。

ブラウザの互換性

webpack は、 ES5 準拠のすべてのブラウザーをサポートしています(IE8 以下はサポートされていません)。
webpackは import()と require.ensure()のための Promise を必要とします。
古いブラウザをサポートする場合は、これらの式を使用する前にポリフィルをロードする必要があります。

動作環境

webpack は Node.js バージョン 8.x 以降で実行されます。

コンセプト | webpack