Question

我正在尝试使用一个webpack配置创建多个（但非常类似的）反应应用程序。假设这是我的目录结构：

├── 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文件。因此：bundle1.js目录中的dist/app1和bundle2.js目录中的dist/app2。但是我遇到了webpack-dev-server的问题。当我运行webpack-dev-server时，它从bundle1.js提供bundle2.js和dist/app1。如果我从output.publicPath和app1对象中删除app2个属性，则webpack-dev-server会从bundle1.js目录中提供bundle2.js和dist。

我应该如何编辑我的webpack配置，告诉webpack-dev-server在相关目录中提供相关的捆绑包？

通过webpack-dev-server为多个bundle定义路径的问题

0 个答案: