WebPACKのコンセプト

基本的に、WebPACKのは、  近代的なJavaScriptアプリケーションで静的パッカーモジュール（モジュールバンドラー）。WebPACKのアプリケーションを処理するとき、それは再帰的に構築する依存グラフ（依存関係グラフ）各モジュールがアプリケーション所望のが、これらのモジュールの全てが、1つまたはそれ以上の中に包装されている含み、  バンドル。

ここにするには 、JavaScriptのモジュールとのWebPACKモジュールについての詳細を学びます。

WebPACKののv4.0.0を起動するには、設定ファイルを導入することはできません。しかし、それはまだあるWebPACKの高度な設定が可能。あなたは4つのコア概念を理解する必要が開始する前に：

• エントランス（エントリー）
• アウトプット（出力）
• ローダ
• プラグイン（プラグイン）

関連する詳細な特定の概念のユースケースを提供しながら、このドキュメントはこれらの概念の高レベルの概要を与えることを目的としています。

エントランス（エントリー）

入口出発点（エントリポイント）のWebPACK内部として構築するために使用すべきモジュールを示し、依存関係グラフが始まります。出発点への入り口の後、WebPACKのは、依存（直接および間接）エントリーの出発点であるモジュールやライブラリを見つけるでしょう。

それぞれの依存関係が最終的な出力を呼び出すために、すぐに処理された  バンドル  ファイルを、我々は次のセクションで詳細にこのプロセスを説明します。

それにより得られる  WebPACKの構成設定  entry 、属性開始点（開始点以上の入口）を指定するエントリを。デフォルト値  ./src。

次に我々は見て  entry 簡単な設定例：

webpack.config.js

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

アプリケーションの特定の要件に応じて、様々な方法の中で構成することができる  entry  特性。以下からの 入り口の開始点 の詳細を学ぶためにセクションを。

出口（出力）

出力属性は、作成WebPACKの出力伝え  バンドルを、どのように、デフォルト値をファイルに名前を付けます  ./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バンドルの名前を伝えるために、財産、そして我々はどこ（EMIT）を生成バンドルします。たぶん、あなたはトップインポートパスモジュール内のコードは、それがあることが何であるかを知りたい  のNode.jsのコアモジュールファイルパスを動作させるために、。

あなたは、その用語が私達の全体のドキュメントと全体で生成された（放出されたり放出）されるかもしれない プラグインAPI 。「生産（プロデュース）」または「（放電）リリース」特別な用語です。

output  プロパティまた、 より多くの設定可能な機能 について、あなたは詳細を知りたい場合は、  output  財産の概念、あなたができる コンセプトの章を読んで 多くを学ぶために。

ローダ

ローダは  、これらの非JavaScriptファイル（自身が唯一のJavaScriptを理解WebPACKの）に対処するためのWebPACKことができます。ローダはWebPACKの効果的に処理することができますすべての種類のファイルに変換することができ、モジュールを、あなたがパッケージ化能力のWebPACKを使用することができ、およびそれらを処理するために、。

本質的に、WebPACKのローダファイルのすべての種類は、アプリケーションのモジュールの依存関係図に変換し（最終的にバンドル）を直接参照することができるされています。

ローダができ、注意してください  import  （例えば、モジュールの任意のタイプをインポート  .css  WebPACKの特定の特徴、他の可能な包装されたプログラム又はタスクの実行はサポートされていない場合、ファイル）。私たちは、それは、開発者がより正確な依存関係グラフを作成することができますので、この言語拡張が必要であると考えています。

高いレベルでは、WebPACKの構成ローダーは二つの目的があります。

1. test 対応ローダを特定するための属性を行う、または特定のファイルの変換されなければなりません。
2. use 使用時にローダすべき変換、の属性。

webpack.config.js

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

上記構成において、単一のモジュールは、オブジェクトを定義し  rules なければならない2つの属性が含まれている属性を、：test および  use。これはWebPACKのコンパイラ（コンパイラ）以下の情報を伝えます。

「ねえ、WebPACKのコンパイラ、あなたが『で会う  require()/ import 最初の使用、あなたがそれをパックする前に、.txtの『パス』ステートメントは次のように解釈されたときに』  raw-loader 変換ルックを。"

WebPACKの中の構成ローダーで定義されたとき、で定義されていることを、覚えておくことが重要である  module.rules  代わりに  rules 。しかし、エラーのWebPACKを定義するときには、重大な警告を与えます。正しい方法で行われていない場合は、この恩恵を受けるようにするために、WebPACKのは「重大な警告を与える。」だろう

ローダと、より具体的な構成属性、我々はまだ言及していません。

詳細はこちら！

プラグイン（プラグイン）

ローダーは、タスクの広い範囲を実行するために使用することができるプラグブロック、特定の種類を変換するために使用されます。プラグインの範囲は、環境変数を再定義するすべての方法を最適化し、圧縮をパッケージから、含まれています。プラグインのインターフェイスは、非常に強力であるさまざまなタスクを処理するために使用することができます。

プラグインを使用したい、あなただけの必要  require() 、その後にそれを追加し、それを  plugins 配列。ほとんどのプラグインは、オプション（オプション）によってカスタマイズすることができます。また、次に使用する必要がある、なぜなら、構成ファイル内のプラグと異なる目的で複数回使用することができ  new 、オペレータのインスタンスを作成します。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config; 

WebPACKのは、箱から出して利用できる多くのプラグインを提供しています！私たちのチェックアウトプラグインのリストを詳細については。

プラグインのWebPACK構成を使用することは簡単ですが、私たちはさらにユースケースを探索することができますがたくさんあります。

詳細はこちら！

モード

選択することで  development または  production ビーイング、および設定する  mode パラメータを、あなたが対応するパターンの最適化の下で構築されたのWebPACKを有効にすることができます

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

詳細はこちら！