2022-05-22 npm について学ぶ
昨日 は Getting Started を実施して使い方を把握した。
今日はその中で紹介されていた Concepts | webpack のページや、npm の package.json についてのページ を読んだ。
concept
webpack はモジュールバンドラーである。
エントリーポイントとして指定されたファイルを始点に依存関係を辿り、Dependency Graph という依存関係のグラフを作成する。
そして、その Dependency Graph を基に、 node_modules 以下のファイル、 src 以下のファイルなど (modules) を束ね (bundle）、成果物として bundle (後述) という一つの JavaScript ファイルを生成してくれる。
(At it's core, webpack is a static module bundler for modern JavaScript applications.)
(When webpack processes your application, it internally builds a dependency graph for one or more entry points and then combines every module your project needs into one or more bundles, which are static asserts to serve your content from.)
webpack.config.js という設定ファイルが存在する。webpack のコアとなるコンセプトを学ぶにおいて、理解が必要となる項目は以下の 6つである (それぞれ後述)
- Entry
- Output
- Loader
- Plugins
- Mode
- Browser Compatibility
bundle
アプリケーションのコンテンツを提供する、静的なアセット (JavaScript, css, 画像ファイルなど)
具体的に言うと、チュートリアルにおいて webpack コマンドを実行して作成された main.js というファイル。
ビルドして生成されるファイルが、 bundle である。
bundle されるファイルは、 JavaScript では例えば node_modules 以下のファイル。
もしくは、ユーザが自作のモジュールとして定義している src/ 以下のファイルなど。
画像や CSS は
Entry
dependency graph を作成するにおける、 entry point の定義。
アプリケーションは Entry に指定されたファイルから始まる。デフォルトでは、 ./src/index.js である。
また、 webpack はここに記載されたファイルをルートとして、依存関係のグラフ (dependency graph) を作成する。
./src/index.js が ./src/module.js に依存していれば、その関係を依存関係のグラフに定義する。
さらに ./src/module.js が ./node_modules/some_package/some_package.js に依存していれば、またそのファイルを依存関係のグラフに定義する。
そのようなことを繰り返し、最後に依存関係のグラフに定義されたファイルを一括して読み込み、大抵はひとつの js ファイル、ひとつの bundle として出力するのである。
Output
bundle を出力する場所 (ディレクトリ)、またそのファイル名を指定する。
デフォルトの出力場所は ./dist/ 、ファイル名は ./dist/main.js である。
出力場所には bundle ファイルのほか、自分の知っている限りではライセンスファイルなどが出力される。
Loader
デフォルトでは、 webpack は JavaScript ファイル、もしくは JSON ファイルしか扱うことができない。
ファイルと、それを読み込む webpack の間に Loader を噛ますことによって、様々なファイルを扱えるようになる。その Loader を定義する場所がここである。入力のバリエーションを増やすことができる。
例えば、 .txt 拡張子のファイルを扱う際に raw-loader という Loader を使用することを指定することができる (これはドキュメントにあった例である)。
こうすることによって、 .txt ファイルが webpack に与えられた際は raw-loader が利用され、 raw-loader は .txt ファイルを、 webpack が読み込むことができるファイル形式 (JavaScript、もしくは JSON) に変換する。
Plugins
webpack は bundles を生成する際に、様々な処理を行う。最適化処理その他である。
Plugins を指定すると、これに合わせて任意の処理を bundles 生成時に webpack に行わせることができる。
様々な Plugins が公式、サードパーティから提供されている。前回のアプリケーション構築で利用した Dotenv webapck はその一例である。
package.json
package.json についても学んだ。この内容については以下記事にて。
