Webpackのコンフィギュレーション
webpack.config.js に書いていくEntry, Output, Loaders, Pluginsを理解するとかけるようになるらしい
Entry
entry pointを指定する。Webpackはそこから依存しているモジュールを明らかにして依存性グラフを構築する
処理した各依存性をbundleに出力する
entry フィールドに書くデフォルト
./src Output
作成するbundleの名前と出力パスを決める
全てのappの構造がコンパイルされてここにはいる
output フィールドに書くデフォルト
./dest Loaders
webpack自体はJSしかわからない。Loadersを使うとJS以外も扱えるようになる
webpackのloaderは全ての種類のファイルをmoduleに変換する
これでJS以外もWebpackでビルドできるようになる
モジュールにはappの依存性グラフとbundleを含むことができる
module フィールドに書く test にトランスフォームするファイルを指定する use にトランスフォームに利用するloaderを指定するwebpack.config.js module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}「require()/import文の
.txt を解決するとき、bundleに追加する前に row-loader を使ってtransformして」ようするに、Loadersはある種のmodulesを変換するために使う
具体的にどんなloaderがある？
BabelとWebpackをつかってJSをトランスパイルするローダー
Plugin
Pluginでいろんなタスクができる
インタフェース Plugin API
使うためには
require() して plugins に指定するプラグインは色々オプションがあるので都度確認する
一つのプラグインも
new すれば複数回（別のオプションで）利用できるプラグイン一覧 Plugins
ユースケースがたくさんある
Mode
環境向け使い分け（
development / production ）実例
上記との差分はdevServerとresolve
CSSにおけるLoaderとPluginの責務分割