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を指定する
code:webpack.config.js
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
「require()/import文の.txtを解決するとき、bundleに追加する前にrow-loaderを使ってtransformして」
ようするに、Loadersはある種のmodulesを変換するために使う
kadoyau.icon
具体的にどんなloaderがある？
BabelとWebpackをつかってJSをトランスパイルするローダー Plugin
Pluginでいろんなタスクができる
使うためには
require()してpluginsに指定する
プラグインは色々オプションがあるので都度確認する
一つのプラグインもnew すれば複数回（別のオプションで）利用できる
ユースケースがたくさんある
Mode
環境向け使い分け（development/production）
実例
上記との差分はdevServerとresolve
CSSにおけるLoaderとPluginの責務分割