如何使用webpack-dev-server的多个入口点？

Question

我想使用webpack-dev-server在一个端口上托管多个入口点。我的当前配置如下：

entry: {
    //Application specific code.
    main: [
        `webpack-dev-server/client?http://${config.HOST}:${config.PORT}`, 
        'webpack/hot/only-dev-server',
        './app/base.js',
        './app/main.js'
    ],

    login: [
        `webpack-dev-server/client?http://${config.HOST}:${config.PORT}`, 
        'webpack/hot/only-dev-server',
        './app/base.js',
        './app/login.js'
    ],
},
output: {
    path: assetsPath,
    publicPath: `http://${config.HOST}:${config.PORT}/public/dist/`,
    chunkFilename: "[name].js",
    filename: '[name].js',
},

但是现在好像对我没用。有什么帮助吗？

- Hao

---

我也在寻找同样的东西。你有运气吗？ - Sergio Flores

此刻，我通过创建一个共享的 webpack.base.config 并为每个入口点创建一个 webpack.[some entry].config 来解决了这个问题，它将使用来自 webpack.base.config 的基本配置。虽然不是理想的解决方案，但运行良好。 - Hao

听起来是一个非常好的解决方案。我打算试一试。 - Sergio Flores

Answer 1

这是一个有效的多入口Webpack配置示例。如果有帮助，请告诉我。 我使用 webpack.optimize.CommonsChunkPlugin('common.js') 来自动生成包含共同JS部分的common.js文件。

var path = require('path');
var webpack = require('webpack');
var WebpackErrorNotificationPlugin = require('webpack-error-notification')


var buildEntryPoint = function(entryPoint){
  return [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    entryPoint
  ]
}

module.exports = {
  devtool: 'eval',
  entry: {
    search: buildEntryPoint('./src/index'),
    generic: buildEntryPoint('./src/index-generic')
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      __CLIENT__: true,
      __SERVER__: false,
      __DEV__: true,
      __DEVTOOLS__: true  // <-- Toggle redux-devtools
    })
  ],
  resolve: {
    alias: {
      'redbox-react': path.join(__dirname, '..', '..', 'src')
    },
    extensions: ['', '.js']
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

- Jurgo Boemo

---

webpack.DefinePlugin 是必要的吗？ - Muhaimin

Answer 2

有点晚回复，但我遇到了类似的问题，并通过多个HtmlWebPackPlugin插件条目来解决。

module.exports = {
  entry: {
    root: ['./src/index.js'],
    labelling: ['./src/labelling.js'],
  },
  output: {
    filename: '[name].js'
  },
...
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html",
      chunks: ["root"]
    }),
    new HtmlWebPackPlugin({
      template: "./src/labelling.html",
      filename: "./labelling.html",
      chunks: ["labelling"]
    })
  ],
...

参考: https://github.com/jantimon/html-webpack-plugin/issues/218

- Ilya L.