Webpack フレームワークの中心となる概念の詳細な説明

Webpack はフロントエンドのパッケージング ツールです (ライブラリやフレームワークではありません)。JS (JSX を含む)、Coffee、CSS (less/sass を含む)、画像などのさまざまなリソースをモジュールとして処理できます。 。この記事では主に Webpack フレームワークの中心的な概念 (知識ポイントのまとめ) を紹介します。必要な方は参考にしていただければ幸いです。

1. 基礎知識のポイント

1.1 webpack は最新の JavaScript アプリケーション用のモジュール バンドラーです。 Webpack はアプリケーションを処理するときに、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらすべてのモジュールを 1 つ以上のバンドルにパッケージ化します。

1.2 webpack の 4 つの中心的な概念:

1.2.1 エントリー: エントリーポイント、エントリー開始ポイント (複数ある場合があります)、webpack はこの開始ポイントから開始され、エントリーファイルがどのファイルに依存しているかを調べます。内部依存関係グラフが構築され、処理され、bundles というファイルに出力されます

1.2.2 出力(output): エントリーポイントで処理されるバンドルファイルの出力パス(path)と名前(ファイル名)を指定します

1.2. 3 ローダー (ローダー): 非 JS ファイルを処理するために使用され、すべてのファイルを Webpack が処理できるモジュールに変換し、パッケージ化やその他の処理のためにそれらを Webpack に渡すことができます。Webpack ローダーは基本的にすべての種類のファイルを変換します。アプリケーションの依存関係グラフから直接参照できるモジュールです:

1.2.3.1 test 属性を使用して、ローダーに対応する変換可能なファイルを識別します

1.2.3.2 use 属性を使用して、これらのファイルを変換します。依存関係グラフに追加され、最終的にはバンドルに追加されます

webpack設定でローダーを定義したい場合は、rulesではなくmodule.rulesで定義してください

1.2.4プラグイン(プラグイン):最適化と圧縮のパッケージ化から、環境内の変数の再定義に至るまで。プラグインのインターフェースは非常に強力で、さまざまなタスクを処理できます

プラグインを使用するには、それをrequire()して、plugins配列に追加するだけです。ほとんどのプラグインはオプションを通じてカスタマイズできます。構成ファイル内で同じプラグインをさまざまな目的で複数回使用することもできます。この場合、new 演算子を使用してプラグインのインスタンスを作成する必要があります。

Webpackには、すぐに利用できるプラグインが多数用意されています。詳細については、プラグインのリストを確認してください。詳細な画像とテキストについては、公式ドキュメント https://doc.webpack-china.org/concepts/ を参照してください。

関連する推奨事項:

webpack+express マルチページサイト開発例の詳細な説明

Electron の構築 React、Webpack デスクトップアプリケーションチュートリアル

webpack 学習チュートリアルフロントエンドパフォーマンス最適化の概要

以上がWebpack フレームワークの中心となる概念の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。