ウェブパックとは何ですか

Webpack は、JavaScript、CSS などを処理できる別のタスク ランナーとバンドルできる、最大の単一ページ Web アプリケーション用のモジュール バンドラーです。 webpack は、フロントエンド開発者のツールセットへの優れた追加機能です。webpack を使用すると、Web 開発がより速く、より効率的に、より楽しくなります。

モジュール バンドラーとは何ですか?

ほとんどのプログラミング言語では、コードを複数のファイルに分割し、これらのファイルをアプリケーションにインポートして、そのファイルに含まれる機能を使用できます。これはブラウザには組み込まれていないため、モジュール バンドラーを構築すると、モジュールを非同期にロードしてロード後に実行するか、必要なすべてのファイルを 1 つの JavaScript ファイルに結合し、 タグを通じてロードするなど、さまざまな形式でこの機能が提供されます。 HTMLで。

モジュール ローダーやバンドラーがなければ、いつでも手動でファイルを結合したり、HTML を無数の タグにロードしたりできますが、これにはいくつかの欠点があります。 1. どのファイルが他のどのファイルに依存するかなど、ファイルをロードする正しい順序を追跡し、必要のないファイルが含まれていないことを確認する必要があります。

2. 複数の タグは、すべてのコードをロードするためにサーバーを複数回呼び出すことを意味し、パフォーマンスが低下します。

3. コンピューターに任せるのではなく、多くの手作業が必要です。

Webpack を選ぶ理由? Webpack を選択する理由は次のとおりです:

1. 以前のバージョンで発生した欠点や問題を解決または回避できるため、これは比較的新しいものです。

2. 始めるのはとても簡単です。他に追加機能を何も持たずに、単に多数の JavaScript ファイルをバンドルしたい場合は、構成ファイルさえ必要ありません。

3. プラグイン システムにより、さらに多くのことが可能になり、非常に強力になります。したがって、おそらくこれが必要な唯一のビルド ツールです。

#Webpack の実行プロセス

##Webpack はエントリから動作を開始します。通常、これらは Webpack が開始される JavaScript モジュールです。その横断プロセス。このプロセス中に、webpack はエントリの一致をローダー設定と比較して評価し、各一致を変換する方法を webpack に指示します。

解析プロセス

エントリ自体がモジュールです。 webpack がエントリを検出すると、webpack はエントリの解決設定を使用してエントリをファイル システムと照合しようとします。 node_modules に加えて、特定のディレクトリでルックアップを実行するように webpack に指示することもできます。 Webpack がファイル拡張子と一致する方法を調整することもでき、ディレクトリに特定のエイリアスを定義することもできます。 「枯渇とパッケージング」の章では、これらのアイデアについて詳しく説明します。 解析に失敗すると、webpack は実行時エラーを発生させます。 webpack がファイルを正しく解析できた場合、webpack はローダー定義に従って、一致するファイルに対して処理を実行します。各ローダーは、モジュールのコンテンツに特定の変換を適用します。

ローダーが解析されたファイルを照合する方法は、ファイル タイプやファイル システム内の場所など、さまざまな方法で構成できます。 Webpack の柔軟性により、ファイルがプロジェクトにインポートされる場所に基づいて、ファイルに特定の変換を適用することもできます。

Webpack のローダーに対しても同じ解析プロセスを実行します。 Webpack を使用すると、どのローダーを使用するかを決定するときに同様のロジックを適用できます。このため、ローダーはすでに自身の構成を解析しています。 Webpack がローダー ルックアップを実行できない場合、ランタイム エラーがスローされます。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。