Webpack フレームワークの使用の概要

今回は、Webpack フレームワークの使用についての概要をお届けします。Webpack フレームワークを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

webpackとは

Webpack は、JS (JSX を含む)、Coffee、CSS (less/sass を含む)、画像などのさまざまなリソースをモジュールとして処理して使用できるフロントエンド パッケージング ツールです。

1. 基本的な知識のポイント

1.1 webpack は、最新の

JavaScript アプリケーション用のモジュール バンドラーです。 Webパックの場合 アプリケーションが処理されると、依存関係グラフが再帰的に構築されます。 グラフ) には、アプリケーションが必要とするすべてのモジュールが含まれており、これらすべてのモジュールを 1 つ以上のバンドルにパッケージ化します。

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

1.2.1 エントリ: エントリ ポイント、エントリの開始ポイント (複数の可能性があります)、webpack はこの開始ポイントから開始され、

エントリ ファイルがどのファイルに依存しているかを調べます。これにより、内部依存関係グラフを構築し、それを処理し、bundles というファイルに出力します

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

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

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

1.2 .3.2属性を使用してこれらのファイルを変換し、依存関係グラフに追加され、最終的にバンドルに追加されるようにします

Webpack 設定でローダーを定義したい場合は、rules ではなく module.rules で定義します

1.2.4 プラグイン:パッケージ化の最適化と圧縮から、環境内の変数の再定義まで。プラグイン インターフェイスは非常に強力で、さまざまなタスクを処理できます。プラグインを使用するには、プラグインを require() してプラグイン配列に追加するだけです。ほとんどのプラグインはオプションを通じてカスタマイズできます。

設定ファイル

で異なる目的で同じプラグインを複数回使用することもできます。この場合、新しい

オペレーターを使用してそのインスタンスを作成する必要があります。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

vue-cli+webpack vue 開発環境の構築方法

vue2-webpack2 フレームワークの構築方法

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