エンタープライズアプリケーション向けのデータグリッドとチャート
webpack
webpackとの提携を誇りに思います

コンセプト

その核心において、webpackは、最新のJavaScriptアプリケーションのための静的モジュールバンドラーです。webpackがアプリケーションを処理するとき、内部的に1つ以上のエントリポイントから依存関係グラフを構築し、プロジェクトに必要なすべてのモジュールを1つ以上のバンドルに結合します。これらは、コンテンツを提供するための静的アセットです。

バージョン4.0.0以降、webpackはプロジェクトをバンドルするために設定ファイルを必要としません。それにもかかわらず、ニーズに合わせて非常に柔軟な設定が可能です。

開始するには、そのコアコンセプトを理解するだけで済みます

このドキュメントは、これらのコンセプトの概要を説明することを目的としており、詳細なコンセプト固有のユースケースへのリンクを提供します。

モジュールバンドラーの背後にあるアイデアと、それらがどのように機能するかをより深く理解するために、これらのリソースを参照してください

エントリー

エントリポイントは、webpackが内部の依存関係グラフの構築を開始するために使用する必要があるモジュールを示します。Webpackは、そのエントリポイントが依存する他のモジュールとライブラリを（直接的および間接的に）把握します。

デフォルトではその値は./src/index.jsですが、webpack設定のentryプロパティを設定することで、異なる（または複数の）エントリポイントを指定できます。例えば

webpack.config.js

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

出力

出力プロパティは、webpackが作成するバンドルをどこに出力するか、およびこれらのファイルの名前をどのように付けるかをwebpackに指示します。メイン出力ファイルの場合はデフォルトで./dist/main.js、その他の生成されたファイルの場合は./distフォルダーになります。

設定にoutputフィールドを指定することで、このプロセスのこの部分を構成できます。

webpack.config.js

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モジュールです。

ローダー

webpackは、すぐに利用できる状態では、JavaScriptファイルとJSONファイルのみを理解します。ローダーを使用すると、webpackは他のタイプのファイルを処理し、アプリケーションで消費して依存関係グラフに追加できる有効なモジュールに変換できます。

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

  1. testプロパティは、変換する必要があるファイルまたはファイルを特定します。
  2. useプロパティは、変換に使用するローダーを示します。

webpack.config.js

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-loaderを使用して変換してください。」

ローダーセクションでローダーを含める場合の詳細なカスタマイズを確認できます。

プラグイン

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

プラグインを使用するには、それをrequire()し、plugins配列に追加する必要があります。ほとんどのプラグインはオプションでカスタマイズ可能です。異なる目的で1つの設定でプラグインを複数回使用できるため、new演算子を使用してそれを呼び出すことでインスタンスを作成する必要があります。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

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

webpack設定でのプラグインの使用は簡単です。ただし、さらに調査する価値のあるユースケースがたくさんあります。詳細はこちらをご覧ください。

モード

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

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

モード設定はこちらで、各値でどのような最適化が行われるかについて詳しく説明しています。

ブラウザ互換性

Webpack は ES5 に準拠したすべてのブラウザをサポートしています（IE8 およびそれ以前のバージョンはサポートされていません）。Webpack は import() および require.ensure() で Promise を必要とします。古いブラウザをサポートしたい場合は、これらの式を使用する前に polyfill をロードする必要があります。

環境

Webpack 5 は Node.js バージョン 10.13.0 以降で動作します。

このページを編集·このページを印刷
次へ »
エントリポイント

18 貢献者

TheLarkInnjhnnsgrgurjohnstewjimrfennerTheDutchCoderadambraimbridgeEugeneHlushkojeremenichelliarjunsajeevbyzykyairhaimofarskidLukeMwilaJalithamuhmushtahachenxsanRyanGreyling2