Explain the meaning of app.entry 'webpack/hot/dev-server'

[ivan-kleshnin]

Link http://webpack.github.io/docs/webpack-dev-server.html contains this code

module.exports = {
  entry: {
    app: ['webpack/hot/dev-server', './app/main.js']
  },
  ...
};

With this message

And make sure you have the special webpack/hot/dev-server entry point in your configuration

This is undocumented. You also use the same chunk in your own examples. But the funniest thing that official react-starter from webpack does not contain this. And they have both live and hot reload enabled...

Here is their entry (single place in code):

var entry = {
  main: options.prerender ? "./config/mainPrerenderer" : "./config/mainApp"
  // second: options.prerender ? "./config/secondPrerenderer" : "./config/secondApp"
};

Did you manage to understand what's about this webpack/hot/dev-server line? What exactly is does? Why everyone uses it except Webpack itself :smiley: ?

[christianalfoni]

Hehe, as I understand it that is required when you do not use the --hot command line option? Or include a script in the index.html? Entry points are just pointing to scripts, like any require statement. It is just initial require statements really.

But does it work without it?

[ivan-kleshnin]

I've deciphered it :smiley_cat:

The only place it's explained is here

In short: you either add those entry line or pass --inline flag to the webpack-dev-server invocation in package.json. The difference is that in the second case socketIO client code required to communicate with dev server is inlined in your main entry. Behavior will be the same.

[christianalfoni]

Haha, fantastic! :-)