Concepts
2019/05/18に更新

webpack は最新のJavaScriptアプリケーション用の 静的モジュールバンドラー です。 Webpackがあなたのアプリケーションを処理するとき、それは内部的にあなたのプロジェクトが必要とするすべてのモジュールをマップし、1つ以上の バンドル を生成するdependency graphを構築します。

JavaScriptモジュールとwebpackモジュールの詳細はここを参照してください。

バージョン4.0.0以降、webpackはプロジェクトをバンドルするための設定ファイルを必要としません が、それでもなお、あなたのニーズによりよく合うように高度な設定が可能です。

Webpack始めるには次の Core Concepts を理解するだけで十分です。

このドキュメントは、詳細な使用例へのリンクを提供しながら、これらの概念の 概要 を解説することを目的としています。

モジュールバンドラーの背後にあるアイデアと、それらが内部でどのように機能するのかをより深く理解するために、以下のリソースを調べてください。

Entry

entry point は、内部のdependency graphを構築するためにどのモジュールをwebpackが使うべきかを示します。 webpackは、他のどのモジュールやライブラリがそのエントリポイントに依存しているのかを(直接的または間接的に)把握します。

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

webpack.config.js

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

詳しくは entry points セクションで学んでください.

Output

output プロパティは、作成した バンドル をどこに発行するか、およびこれらのファイルの命名方法を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.filenameoutput.path プロパティを使ってwebpackにバンドルの名前と出力先を指定しています。 あなたが一番上にインポートされている path モジュールについて疑問に思うのであれば、それはファイルパスを操作するために使われるNode.jsのコアモジュール です。

outputプロパティはもっと多くの設定可能な項目を持っています、そしてもしあなたがその背後にある概念についてもっと知りたいのなら、アウトプットのセクションで詳しく知ることができます。

Loaders

設定がない場合webpackはJavaScriptとJSONファイルだけを理解します。 Loaders は、webpackが他の種類のファイルを処理し、 dependency graph に追加することでそれらをあなたのアプリケーションにとって使用可能な モジュール に変換します。

任意のタイプのモジュールをインポートする能力(例えば .cssファイル)はwebpack特有の機能であり、他のバンドラーやタスクランナーではサポートされていないかもしれません。 この言語の拡張は開発者がより正確なdependency graphを構築することを可能にするので有効であると私達は感じています。

loaders はあなたの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' }
    ]
  }
};

上記の設定は二つの必須プロパティtestuseを持つrulesプロパティによって定義されました。これはwebpackのコンパイラに以下のことを伝えます:

"へいwebpackコンパイラ、require()/import文の中で '.txt'ファイルのパスに出くわしたとき、それを追加する前にraw-loader使って 変換しバンドルしてくれ"

Webpackの設定でルールを定義するとき、あなたはそれらを rules.ではなくmodule.rulesの下で定義していることを覚えておくことは重要です。これが間違って行われた場合webpackはあなたのために警告をします。

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

さらなるカスタマイズにローダーを含めるときは、loaders sectionを確認できます。

Plugins

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

プラグインインターフェースを使ってウェブパックの機能を拡張する方法を調べてください。

プラグインを使うには、プラグインをrequire()して pluginsプロパティの配列に追加する必要があります。 ほとんどのプラグインはオプションを通じてカスタマイズ可能です。 プラグインはconfigの中でさまざま使用目的のために複数回使用することができるので、プラグインはnew演算子でインスタンスを作成する必要があることに注意してください。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
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は多くのプラグインが用意されています。 pluginsのリストを調べてください。

あなたのwebpackの設定でプラグインを使うのは簡単です - しかし、もっと多くのユースケースがあります。 これらについての詳細はこちら

Mode

modeパラメータをdevelopmentproductionまたはnoneのいずれかに設定することで、それぞれの環境に対応して最適化することができます。 デフォルト値は productionです。

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

mode configurationセクションで、mode configurationが各値に対してどのように最適化をおこなっているかを学びましょう。

Browser Compatibility

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

このページの内容は https://webpack.js.org/concepts (Creative Commons BY 4.0) から引用しています