このインデックスは、Webpackエコシステム全体で使用される一般的な用語をリストしています。
A
- アセット:これは、ウェブサイトやその他のアプリケーションで一般的に使用される画像、フォント、メディア、その他の種類のファイルに対する一般的な用語です。出力内の個々のファイルになることが一般的ですが、style-loaderやurl-loaderなどを使用してインライン化することもできます。
B
- バンドル:複数の異なるモジュールから生成され、バンドルには、ロードとコンパイルプロセスが既に完了したソースファイルの最終バージョンが含まれています。
- バンドル分割:このプロセスは、ビルドを最適化するための1つの方法を提供し、Webpackは単一のアプリケーションに対して複数のバンドルを生成できます。その結果、各バンドルは他のバンドルに影響を与える変更から分離することができ、再公開およびクライアントによる再ダウンロードが必要なコードの量を削減し、ブラウザのキャッシュを利用することができます。
C
- チャンク:このWebpack固有の用語は、バンドルプロセスを内部的に管理するために使用されます。バンドルはチャンクで構成され、いくつかのタイプ(例:エントリと子)があります。通常、チャンクは出力バンドルに直接対応しますが、1対1の関係にならない構成もあります。
- コード分割:コードをさまざまなバンドル/チャンクに分割し、すべてを含む単一のバンドルをロードする代わりに、必要に応じてオンデマンドでロードすることを指します。
- 設定:Webpackの設定ファイルは、オブジェクトをエクスポートするプレーンなJavaScriptファイルです。このオブジェクトは、定義されたプロパティに基づいてWebpackによって処理されます。
D
- 依存関係グラフ:あるファイルが別のファイルに依存するたびに、Webpackはこれを依存関係として扱います。エントリポイントから開始して、Webpackはアプリケーションに必要なすべてのモジュール/アセットを含む依存関係グラフを再帰的に構築します。
E
- エントリポイント:エントリポイントはWebpackに開始場所を伝え、依存関係のグラフに従って何をバンドルするかを認識します。アプリケーションのエントリポイントを、バンドルするもののコンテキストルートと考えてください。
H
L
- ローダー:モジュールのソースコードに適用される変換です。これにより、
require()
または「ロード」するときにファイルを事前に処理できます。「タスクランナー」に似ています。 - 遅延ロード:アプリケーションの一部(チャンク)を遅延ロードするプロセスです。言い換えれば、本当に必要な場合にのみロードすることです。
M
- モジュール:完全なプログラムよりも小さいサーフェスエリアを提供する、個別の機能チャンクです。適切に記述されたモジュールは、堅牢な抽象化とカプセル化境界を提供し、一貫性のある設計と明確な目的を構成します。
- モジュール解決:モジュールは別のモジュールから依存関係として要求でき、リゾルバーは絶対パスでモジュールを見つけるのに役立つライブラリです。モジュールは、
resolve.modules
に指定されたすべてのディレクトリ内で検索されます。 - マニフェスト:ランタイムは、バンドルされてブラウザに送信された後、モジュールを解決してロードするためにこれを使用します。
O
- 出力:コンパイルされたファイルをディスクに出力する場所を指定するオプションです。
複数のエントリポイントが存在する可能性がありますが、出力設定は1つだけ指定されることに注意してください。
P
- プラグイン:
apply
プロパティを持つJavaScriptオブジェクトです。このapply
プロパティはWebpackコンパイラによって呼び出され、コンパイルライフサイクル全体にアクセスできます。これらのパッケージは通常、何らかの方法でコンパイル機能を拡張します。
R
- リクエスト:require/importステートメントの式を指します(例:require("./template/" + name + ".ejs")、リクエストは"./template/" + name + ".ejs"です。
S
- シミング:すべてのJSファイルがWebpackで直接使用できるとは限りません。ファイルはサポートされていないモジュール形式であるか、モジュール形式ではない可能性があります。ここで
シミング
が役立ちます。
T
- ターゲット:ブラウザ、NodeJS、Electronなど、特定の環境向けにコンパイルするための、ユーザーが設定したデプロイメントターゲットはこちら。
- ツリーシェイキング:使用されていない/余分なコードの削除、より正確には、ライブコードのインポートです。Webpackなどのコンパイラは、さまざまな種類の
import
ステートメントとインポートされたコードの使用状況を分析して、依存関係のどの部分が実際に使用されているかを判断し、使用されていない「ツリー」の部分を削除します。
V
- ベンダーエントリポイント:
app.js
とvendors.js
の両方から始まる依存関係グラフを作成します。これらのグラフは互いに完全に分離されており、独立しているため、CommonsChunkPlugin
を活用して、アプリバンドルからベンダー参照をベンダーバンドルに抽出できます。長期的なベンダーキャッシングとして知られるWebpackの一般的なパターンを実現するのに役立ちます。
W