やりたいこと
表題の通り。
{
entry: {
a: "./src/a.js",
b: "./src/b.js",
}
}
の様なエントリーポイントを作ったときに出力を
dist/a/a.js
dist/b/b.js
のようにしたい。
基本的に output の filename に[name]/[hash].js
のように指定すれば[name]
のプレースホルダーにエントリーポイント名が入るが、file-loader などで読み込んだファイルはこのプレースホルダーが使えず、dist 直下に出力されてしまったりする。
もっというと html plugin とかコピープラグインとかでファイル移動する場合も出力ディレクトリごとに設定を書かなきゃいけなくて面倒だし辛い。
file-loader は [name]
プレースホルダーをチャンク名(エントリーポイント名)ではなくファイル名として埋めてしまうのでディレクトリを分けて出力することができないっぽい。
解決方法
webpack の multiple-compiler なコンフィグを作る。
entry と output の組毎に設定を作ってやって、それらを配列として webpack.config.js
でエクスポートする。
output の path
を出力したいディレクトリにしてしまえば、loader とか plugin で [name]
を意識したりする必要もなくなって楽。