如何使用 webpack-dev-server 多入口点 [英] How to use webpack-dev-server multiple entries point

问题描述

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

I would like to use the webpack-dev-server to host multiple entry points at one PORT. My current config is below:

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',
},

但现在似乎对我不起作用.有什么帮助吗?

But seems like it doesn't work for me right now. Any help?

推荐答案

这是一个工作多入口点 webpack 配置的示例.如果有帮助，请告诉我.我使用 webpack.optimize.CommonsChunkPlugin('common.js'), 自动生成一个带有常用 js 部分的 common.js 文件.

This is an example of a working multiple entrypoint webpack config. Let me know if it helps. I use webpack.optimize.CommonsChunkPlugin('common.js'), to generate a common.js file with the common js parts automatically.

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')
    }]
  }
};

这篇关于如何使用 webpack-dev-server 多入口点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！