webpack-dev-serverでpublicPathを複数設定する

Question

webpack-dev-serverを使用しての画面開発を行おうと思うのですが
バンドルファイルの配信先が複数になる場合にうまく動きません

現在の設定

webpack.config.jsの設定は以下になります。(実際はそれぞれにモジュールなど記載していますが割愛

const path = require('path')
const base = {
  context: path.join(__dirname, 'src'),
  devServer: {
    contentBase: 'dist',
    port: 3000
  }
}

module.exports = [{
  entry: 'js/first.js',
  output: {
    path: path.join(__dirname),
    filename: 'first.bundle.js',
    publicPath: '/js/aaa/'
  }
}, {
  entry: 'js/second.js',
  output: {
    path: path.join(__dirname),
    filename: 'second.bundle.js',
    publicPath: '/js/bbb/'
  }
}].map(e => Object.assign({}, base, e))

起動方法

$ webpack-dev-server --inline

###現象
下記のような状態です

• distをルートとしたWEBサーバが立ち上がる
• http://localhost:3000/js/aaa/first.bundle.jsにバンドル化したfirst.jsが配信される
• http://localhost:3000/js/bbb/second.bundle.jsは404になってしまう

起動時のターミナルログ↓

Project is running at http://localhost:3000/
webpack output is served from /js/aaa/
Content not from webpack is served from dist

問題

ログから見るに
どちらか片方のoutput.publicPathしか認識できていないように見えます

いろいろな事情で配信先を一箇所にまとめることはできないためこのような形になっております
ざっくりとした状況説明ですがご教授お願い致します

Answer 1

自己解決いたしました
cliでWEBサーバを起動するのではなく、
expressサーバを自分で立てることで対応しました

ソースコード

プロジェクトルート/srcipts/devwebsrv.jsを用意しました

const express = require('express');
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const configs = require('../webpack.config');
const path = require('path');

const app = express();

configs.forEach(c => {
    const {output: {publicPath, filename}} = c;
    const fullpath = path.join(publicPath, filename);
    console.log(`deployed file to "${fullpath}"`);
    app.use(middleware(webpack(c), {publicPath}));
});

const rootPath = path.resolve(__dirname, '../dist');
app.use(express.static(rootPath));

app.listen(5000);
console.log('started WebPackDevServer');
console.log('access to http://localhost:5000');

解説

自前expressサーバを立ててミドルウェアとしてwebpackを組み込み
配信先の数だけミドルウェアを登録することで
複数のパスに対応できました

静的コンテンツの対応も忘れず