Webpack 通过Web包开发服务器定义多个捆绑包的路径时出现问题

我试图用一个网页配置创建多个（但非常相似）react应用程序。假设这是我的目录结构：

├── src
│   ├── app01
│   │   └── app01.js
│   ├── app02
│   │   └── app02.js
│   └── shared-components
│       ├── Logo
│       │   ├── Logo.js
│       ├── Nav
│       │   ├── Nav.js
├── dist
│   ├── app01
│   │   ├── app01.html
│   ├── app02
│   │   └── app02.html

在webpack.config.js中，我有以下内容：

var config = {
//cut for brevity 
},
  devServer: {
    contentBase: './dist/',
    colors: true,
    inline: true
  }
}

var app1 = Object.assign({}, config, {
  name: 'app1',
  entry: './src/app1/app1',
  output: {
    path: './dist/app1',
    publicPath: '/app1/',
    filename: 'bundle1.js'
  }
})

var app2 = Object.assign({}, config, {
  name: 'app2',
  entry: './src/app2/app2',
  output: {
    path: './dist/app2',
    publicPath: '/app2/',
    filename: 'bundle2.js'
  }
})

if (process.env.NODE_ENV === 'production') {
  config.devtool = false
   config.plugins = [
   new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin({comments: false}),
     new webpack.DefinePlugin({
     'process.env': {NODE_ENV: JSON.stringify('production')}
   })
 ]
}

module.exports = [app1, app2]

当我运行我的构建脚本时，webpack工作并在相关文件夹中创建相关的js文件。所以：

dist/app1

目录中的

bundle1.js

，以及

dist/app2

目录中的

bundle2.js

。然而，我有问题的网页开发服务器。当我运行webpack dev server时，它同时为

dist/app1

中的

bundle1.js和
bundle2.js
提供服务。如果我从
app1
和
app2
对象中删除
output.publicPath
属性，则Web包开发服务器将从我的
dist
目录中删除
bundle1.js
和
bundle2.js

我应该如何编辑我的webpack配置来告诉webpack dev server为相关目录中的相关捆绑包提供服务