webpackコアモジュール、コンパイラとコンパイル、基本的なプロセスとHMRのWebpackエンジニアリングプラクティスの概要

1つ、webpackコアモジュール

1. Webpackプロジェクトは巨大ですが、それWebpackは本質的にイベントの流れのメカニズムです。イベントを介して直列に接続されたさまざまなプラグフローは、最終的にWebpackプロセス全体のコアを完成させTapableます。イベントフローメカニズムの実現はモジュールです。WebpackのコンパイルCompilerと作成Bundleを担当するのCompilationは、から継承されTapableます。
2. WebpackコアライブラリのTapable原則EventEmitterは、イベントを登録および監視することにより、Webpack関数メソッドのライフサイクルをトリガーすることにより、類似していますが、さまざまなタイプを含め、より強力です。ではWebpack真ん中、tapable彼らはオブジェクトを入れてhooks、我々はそれらのフックを呼び出すので、上
3. Tapable主成分分析、Tapable実行プロセスは4つのステップに分けることができます。

• tap*バインディングを登録するためのイベントの使用。バインディングのタイプに応じて、次の3つの方法tap、tapPromise、tapAsyncがありtapPromise、tapAsyncますHook。非同期タイプのバインディング方法。
• call*タイプに応じてイベントトリガーを使用しますが、トリガーする3つの方法も提供します。call、promise、callAsync；
• 対応するタイプのコードスニペットを生成します（実行されるコードは、実際にはスペル文字列によってスペルアウトされます）。
• 3番目のステップで生成されたコードフラグメントを生成します。

4. 要約：これTapableはWebpack、達成するために実行WebpackされているすべてのワークプロセスのコアモジュールですTapable。Tapable基本的に、さまざまなタイプのイベントバインディングメカニズムを提供しますHook。使用するさまざまなプロセスに応じて、さまざまなタイプの特性を選択できます。Tapable通常のカスタムJavaScriptイベントバインディング（たとえばEventEmitter）を使用したバインディングイベントのコア実装段階はそれほど違いはありませんが、イベントがトリガーされると、関数の実行が一時的に実行可能なコードスニペットを生成します。この実装でTapableは、イベントのフローを制御する強力な機能waterfall/parallelを実現するために、ストリームなどの非同期/並列イベントを制御する機能を実現するシリーズメソッドとしても増加しました。

2.Webpackのコンパイラとコンパイル

1. Webpackワークフロー、CompilerおよびはCompilationから継承されているTapable異なる点は、Compiler各ことWebpackに対応する構成Compilerオブジェクトは、レコード全体Webpackのライフサイクルを、すべての生成された各構築物の構築中にCompilation，Compilation構築サイクルの生成物です。
2. 概要：Webpack2つのコアクラスCompilerとCompilation。CompilerたびにWebpack、すべてのライフサイクルの対象とCompilationされWebpack、ビルドプロセスは、毎回オブジェクトのライフサイクルCompilationを通じてCompilerインスタンスを作成。どちらのクラスにも、それぞれのクラスとは異なる独自のライフサイクルがあります。Hook対応するHookイベントを追加することで、各キーデータとオブジェクトのライフサイクルを取得できます。Compilation非常に重要な課題があるがありStats、オブジェクトをすることによって得ることができるオブジェクトWebpackのすべてのパッケージmodule、chunk 和 assetsの分析を通じて、情報をStatsなどとして有用な情報オブジェクトの多くを得ることができwebpack-bundle-analyzer、分析パッケージのプラグインのこのタイプは、分析の結果であるStatsと分析レポートオブジェクトを取得します。

3、Webpackの基本的なプロセス

1. Webpack 基本的なプロセスは、次の3つの段階に分けることができます。

• 準備フェーズ：主なタスクはCompiler、Compilationオブジェクトを作成することです。
• コンパイルフェーズ：このフェーズは、タスクのmodules解析と生成を完了するためのものchunksです。
• module分析：インスタンス、loadersアプリケーション、依存関係のコレクションを作成する3つの主要なステップが含まれています。
• chunks生成することは、主要なステップごとに、chunkを含める必要性を見つけることですmodules。
• 出力段階：この段階の主なタスクはchunks、最終ドキュメントの生成に基づいています。

2. 出力段階では、テンプレートのHash更新、テンプレートのレンダリングchunk、生成されたファイルの3つの主要なステップがあります。特定のコードレベルに洗練されて、それは大まかに次のように分けることができます：

• 初期化パラメーターには、次のものが含まれます。構成ファイルとshell読み取りおよび組み合わせパラメーターから、最終パラメーターを取得します。
• shell のパラメータは、構成ファイルのパラメータよりも優れています。
• 前のステップでCompiler、クラスのインスタンス、登録されているすべてのプラグインのパラメーターを使用して、対応するWebpackビルドライフサイクルバインディングに取得しますHook。
• コンパイルを開始します。コンパイルを開始するCompilerためのクラスrunメソッドの実装。
• compiler.runメソッド呼び出しcompiler.compile、中compileのインスタンスCompilationクラス。

3. Compilation それは物事を構築してパッケージ化することであり、主なものは次のとおりです。

• 入口の検索：entry構成に従って、すべてのエントリー文書を検索します。
• モジュールのコンパイル：ファイルの種類とloader構成に基づいて、対応するloaderファイル変換処理を使用して実行されます。
• ファイルAST構文ツリーの解析。
• ファイルの依存関係を調べます。
• 依存モジュールを再帰的にコンパイルします。

4. 各再帰ファイルの最終的な結果の後、に従ってentryコード生成ブロックの構成chunk、
   全ての出力chunk対応するoutputパス。
5. shellのパラメータは、構成ファイルよりも優れています。例：構成ファイルで指定されているのmodeはdevelopment、shellであり、着信の--mode production場合は、最終mode値productionです。
6. ではWebpackワークフロー、Tapableそれらを介して実行すると、Tapableすべての種類Hook（フック）を構成するWebpackライフサイクルを。Tapable Hookライフサイクルとの関係は次のとおりです。

• Hook：フック、に対応します。TapableHook
• ライフサイクル：Webpack実行の流れは、フックは、実際には、一般的に類似のライフサイクルでentryOptionのHookライフサイクルでは、entry-option。
• Webpack2つの重要なモジュールプロセスへの参加は次のとおりCompiler和Compilationです。

7. 概要：Webpackパッキングプロセスは、プロパティの準備段階、modules出力段階、chunks出力段階、およびbundle出力段階の後に、それぞれ構成ファイルの読み取りを開始します。各段階では、それぞれが参加する異なる「役割」を持ち、Webpackパッケージングプロセス全体がCompiler制御され、それぞれがCompilation制御されたプロセスでパッケージ化されます。通常モードでは、パッケージ化、および1対1の関係であり、モード、それがあるファイルはそう、複数の包装工程で結果が変更されるため、そして対多の関係で、通過プロセス、あなたがコールバックすべての包装工程を得ることができます。webpackCompilerCompilationwatchWebpackCompilerCompilerCompilationHook Compiler

8. Webpack ワークフローのクラスは次のとおりです。

• Tapbale：Webpackイベントフローのコアクラス。
• Compiler：Webpackワークフローの最高レベルのオブジェクト、初期構成はWebpack、そのようなグローバルフックプロセスを提供しますdone、compilation。
• Compilation：Compilerオブジェクトのインスタンスが作成され、各パッケージがプロセスフローのコアであり、オブジェクトモジュールの依存関係、リソースの最適化、runtimeコードのレンダリングなどで解決されます。Compilation一部のオブジェクトでは、次のものが使用されます。
  • Resolver：モジュール（module）、loaderなどのパスを分析して、対応する場所を見つけるのに役立てます。
  • ModuleFactory：モジュール構成の例を担当し、Resolver解決はファイルから読み取られたソースコード内のコンポーネントを引き継ぎ、モジュールオブジェクトを作成します。
  • Template：主にruntimeコードを生成するために、コードは次の依存関係の順序処理に従って解析され、Template最終的にコードをパックしたものに配置されます。

4、webpackのHMR

1. HMR サイクル全体は、起動フェーズとファイルの監視および更新プロセスの2つの部分に分かれています。
2. 起動段階でWebpack、webpack-dev-server相互作用します。Webpackそして、webpack-dev-server主に相互作用するExpressミドルウェアwebpack-dev-middlewareを介して、この段階は次のステップに細分できます。

• webpack-dev-serverWebpackパッケージwatchモードを開始します。このモードでWebpackは、ファイルの変更を監視します。ファイルが変更されると、ファイルは再パッケージ化され、watchモードWebpackパックの結果はディスクをドロップしません（ハードディスクに保存されます）。
• webpack-dev-server相互作用、受信初期化オブジェクトを、フックが監視することができ、パッケージング工程;webpack-dev-middlewareWebpackWebpack-dev-middlewareWebpackCompilerCompilerWebpack
• の場合devServer.watchContentBase=trueはwebpack-dev-server、モニター静的ファイルフォルダーを変更し、通知ブラウザーを変更してページを再度更新し、新しいファイルを要求します。
• ブラウザwebpack-dev-serverを開いた後、ブラウザを使用sockjsしServer、WebSocket長い接続を作成する間、この接続は長く、ブラウザのwebpack-dev-server通信ブリッジ、それらの間の通信は、hash今回のWebpack監視ファイルの変更が発生した場合、ファイル情報（コンパイルされたモジュール値）を渡すことです。、webpack/hot/dev-server達成するためにHMR更新するか、ページを更新。

3. 次のように注意してください。

• webpack-dev-servercontentBase起動、サーバーのフォルダ上の静的リソースディレクトリとして理解することができserver、後に、あなたはURLメソッド+コンピュータのファイルパスに特定のドキュメントにアクセスすることができ、使用してファイルWebpackのパスのうち、パッケージは同じではありません。
• 2つの監視ファイルの変更がありWebpackます。モジュール全体の依存関係の変更を監視する最初のステップ、再起動Webpackコンパイルの変更です。webpack-dev-server独自の監視contentBaseファイルの変更の3番目のステップで、ファイルはブラウザにページの変更を更新するように指示します。パッケージ化されていない依存関係のコンテンツがあるHMRため、ページは更新されません。contentBaseWebpack
• WebSocketNeed server and browserは、このファイルに挿入して通信を作成すること（new WebSocket），webpack-dev-serverにより、ブラウザに対応する接続​​コードを作成しました。chunkswebpack-dev-server/clientWebSocket

4. このフェーズの終了を開始しWebpackます。ファイルの変更を監視した後、今度はファイル更新プロセスの監視にWebpack入り、ファイルの後で依存関係グラフの変更を監視します。

• Webpackファイルを再コンパイルします。今回はwebpack.config.jsプラグインを追加HotModuleReplacementPluginすると、コンパイルされた2つのファイルの違いのリストが生成され（manifest）ます[hash].hot-update.json。このmanifest JSONファイルには変更ファイルのUpdate内容が含まれています[id].[hash].hot-update.js。合格するプロセスを梱包フックリスニングをした後、通知の使用コンパイルした後、長い接続プッシュ値を、webpack-dev-serverwebpack-dev-middlerWebpackCompilerwebpack-dev-serverWebSockethash
• コンパイルされたHash値を外部に送信することに加えwebpack-dev-serverて、長い接続を介してブラウザに現在のページコードがinvalid状態であることを通知し、新しいコードを更新する必要があります。
• Hash後を追うブラウザは、最初にファイルのAjax要求manifestファイルの[hash].hot-update.json内容を開始します。
• manifest取得するためのファイルリストの内容の後、教えてくれるHMRのRuntimeこれらの要求変更JavaScript今回がします、ファイルRuntimeのインベントリリストに基づいて開始することがJSONP要求、2は、差分ファイルがコンパイルされ[id].[hash].hot-update.jsたページの中に降りheadラベルscriptの実行中に、最終的にはフルを完了プロセスを更新します。

5. 概要：webpack-dev-server直接開始することもできますがHMR、実際のコアはwebpack-dev-middlewareです。webpack-dev-serverこのミドルウェアに加えて、主な機能は静的サーバーです。