file-loader を使っている webpack でエントリーポイント毎に出力ディレクトリを分けたい

やりたいこと

表題の通り。

{
  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 なコンフィグを作る。

https://stackoverflow.com/a/38132106/2014050

entry と output の組毎に設定を作ってやって、それらを配列として webpack.config.js でエクスポートする。
output の path を出力したいディレクトリにしてしまえば、loader とか plugin で [name] を意識したりする必要もなくなって楽。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.