https://webpack.js.org/concepts/ の日本語訳。
コンセプト
webpack は、最新の JavaScript アプリケーションの為の静的モジュールバンドラーです。
webpack がアプリケーションを処理するとき、プロジェクトが必要とするすべてのモジュールを整理して、 1 つ以上のバンドルを生成する 依存グラフ を内部的に構築します。
JavaScript モジュールと Webpack モジュールの詳細については、 こちら をご覧ください。
バージョン4.0.0以降、 webpack はプロジェクトをバンドルするための構成ファイルを必要としません。
しかし、開発者のニーズに合わせて設定することができ、 驚くべきカスタマイズ性 を有しています。
よりよく合うように柔軟に設定することができます。
webpack の利用を開始するには、中核となるコンセプトを理解するだけで十分です。
このドキュメントは、個々のコンセプトの使用例のリンクを提供すると共に、コンセプトの概要を説明することを目的としています。
モジュールバンドラーの背後にある思想と、内部でどのように機能するかについての理解を深めるには、次のリソースを参照してください。
エントリー
エントリポイントは、内部 依存関係グラフ の構築を開始するために Webpack が使用する必要があるモジュールを示します。
webpack は、そのエントリポイントが(直接的および間接的に)依存している他のモジュールとライブラリを特定します。
デフォルト値は ./src/index.js です。
しかし webpack の設定で entry プロパティを指定することで、異なる(または複数のエントリーポイント)を指定できます。例えば:
module.exports = {
entry: './path/to/my/entry/file.js'
};
詳細は エントリポイント のセクションをご覧ください。
出力
output プロパティは、バンドルファイルを出力する場所とファイルの命名規則を webpack に指示します。
デフォルトでは、メインの出力ファイルは ./dist/main.js 、他の出力ファイルは ./dist フォルダーになります。
設定で output フィールドを指定することにより、ファイルの出力先と命名規則を設定することができます。
const path = 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 プロパティは変換を行うために使用するローダーを示します。
const path = 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 演算子を使用して呼び出し、プラグインのインスタンスを作成する必要があります。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm を介してインストール
const webpack = require('webpack'); // 組込みプラグインを利用する
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({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 以降で実行されます。