webpack

TL;DR

モダンな JavaScript アプリケーションのための静的モジュールバンドラ。エントリポイントから依存グラフを作り、必要なモジュールを 1 つ以上のバンドルにまとめる。

公式ドキュメントでは、次の 5 つを中心となる概念としている。

entry: 依存グラフを作り始めるモジュール。デフォルトは ./src/index.js である。webpack は、エントリポイントが直接・間接に依存するモジュールとライブラリをたどる
output: バンドルを出力する場所とファイル名。デフォルトは ./dist/main.js である
loader: JavaScript 以外のファイルを、アプリケーションで使えるモジュールに変換して依存グラフに加える
plugin: バンドルの最適化、アセットの管理、環境変数の注入など、loader より広い処理を行う
mode: development、production、none のどれかを指定し、環境に合った組み込みの最適化を有効にする。デフォルトは production である

loader は module.rules に、変換するファイルの条件（test）と使う loader（use）を書く。

export default {
  entry: "./path/to/my/entry/file.js",
  module: {
    rules: [{ test: /\.js$/, use: "babel-loader" }],
  },
}

Effective TypeScript の項目76 によると、webpack で CSS や画像を import すると、そのままでは TypeScript がモジュールを認識できない。declare module "*.jpg" のような型宣言でモデリングする。

また、項目78 によると、ts-loader を使う webpack は型チェックも行うので、ビルドが遅くなる。トランスパイルだけにするにはオプションを指定する。

description	エントリポイントから依存グラフを作り、モジュールを 1 つ以上のバンドルにまとめる JavaScript の静的モジュールバンドラ
tags	word, javascript
aliases