ホームページ > 記事 > ウェブフロントエンド > Webpack フレームワーク (マスターコアテクノロジー)

Webpack フレームワーク (マスターコアテクノロジー)

亚连オリジナル: 2018-06-15 23:31:522201ブラウズ

webpack は、最新の JavaScript アプリケーション用のモジュールバンドラーです。この記事では、主に Webpack フレームワークの中心的な概念を紹介します (知識ポイントの整理) 必要な友人は、

webpack とは何ですか

webpack は、フロントエンドで構築されたパッケージ化ツール (ライブラリやフレームワークではありません) を参照してください。 . JS(JSX含む)、coffee、css(less/sass含む)、画像等の様々なリソースをモジュールとして加工して利用することができます。

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/ を参照してください。

上記は私がまとめた文章です、皆様のお役に立てれば幸いです

JSでマウスエフェクトに続くクロス座標を実装する方法

安全でない画像の問題に関連するAngular4の使い方パス

Webpack で Electron アプリケーションを構築する方法

Webpack の最適化構成の問題について

jQuery でリストに動的に追加する方法

jQuery でオンラインカスタマーサービス機能を実装する方法

Vueでの入店/退出アニメーションの実装方法

node.jsのルーティングとミドルウェアの詳細な紹介

Angularを使用して基本的なショッピングカート機能を実装する方法

制御コンポーネントと非制御コンポーネントの詳細な紹介React Control コンポーネント内のコンポーネント