Webpack-dev-server: Multiple entries hot-reload not working

Created on 10 Sep 2015 · 1Comment · Source: webpack/webpack-dev-server

I am trying to get my hot-reloading to work with multiple entries. If someone could help, it would be much appreciated.

My config looks like this:

var webpack = require('webpack');

module.exports = {
  entry: {
      'dev-server-client' : 'webpack-dev-server/client?http://localhost:3000',
      'dev-server': "webpack/hot/dev-server",
      'first': "./private/js/index.jsx"
  },
  output: {
    path: "/public",
    publicPath: "http://localhost:3000/public/",
    filename: "[name]-bundle.js"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin("common-bundle.js")
  ],
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loaders: ['react-hot', 'babel']
      }
    ]
  },
  devServer: {
      contentBase: 'http://localhost:3000/public/',
      hot: true
  }
};

Source

alexprice1

Most helpful comment

I got it figured out. I moved my dev-server stuff in an array, and then in my html including the dev-bundle.js:

webpack.config.js:

  entry: {
    dev: [
      'webpack-dev-server/client?http://localhost:3000',
      "webpack/hot/dev-server",
    ],
    oil: "./private/js/index.jsx",
    another: "./index.jsx"
  },

index.html:

<!doctype html>
<html>

<body>
  <div id="app"></div>
  <script src="http://localhost:3000/webpack-dev-server.js"></script>
  <script src="http://localhost:3000/public/common-bundle.js"></script>
  <script src="http://localhost:3000/public/dev-bundle.js"></script>
  <script src="http://localhost:3000/public/first-bundle.js"></script>
  <script src="http://localhost:3000/public/another-bundle.js"></script>
</body>

</html>

alexprice1 on 10 Sep 2015

👍5

>All comments

I got it figured out. I moved my dev-server stuff in an array, and then in my html including the dev-bundle.js:

webpack.config.js:

  entry: {
    dev: [
      'webpack-dev-server/client?http://localhost:3000',
      "webpack/hot/dev-server",
    ],
    oil: "./private/js/index.jsx",
    another: "./index.jsx"
  },

index.html:

<!doctype html>
<html>

<body>
  <div id="app"></div>
  <script src="http://localhost:3000/webpack-dev-server.js"></script>
  <script src="http://localhost:3000/public/common-bundle.js"></script>
  <script src="http://localhost:3000/public/dev-bundle.js"></script>
  <script src="http://localhost:3000/public/first-bundle.js"></script>
  <script src="http://localhost:3000/public/another-bundle.js"></script>
</body>

</html>

alexprice1 on 10 Sep 2015

👍5

Was this page helpful?

0 / 5 - 0 ratings