Webpack-dev-server: hot: true not adding HotModuleReplacementPlugin in webpack.config.js

[ryankask]

The docs seem to imply that adding hot: true to the devServer section in webpack.config.js is the equivalent to webpack-dev-server --hot but this isn't the case: HotModuleReplacementPlugin does not seem to be added.

Sample config:

module.exports = {
  ...
  devServer: {
    hot: true,
    inline: true,
    noInfo: true
    port: 4000
  }
};

Running webpack-dev-server and visiting http://localhost:4000, the entry points aren't loaded. If I explicitly add new webpack.HotModuleReplacementPlugin() to plugins, it works.

Is this a bug or does the following comment found in the "API" section below also apply the the Webpack config?

hot: true,
  // Enable special support for Hot Module Replacement
  // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
  // Use "webpack/hot/dev-server" as additional module in your entry point
  // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 

[szmtcjm]

@ryankask same to you

[wmertens]

Same here, the reason is that the binary does initialization of webpack but the library doesn't: https://github.com/webpack/webpack-dev-server/blob/d275e599ee33a411ccb833d45498370c9724ee94/bin/webpack-dev-server.js#L116-L126

Maybe the devServer configuration gets read too late to inject the hot loading?

[Wicus]

I think this will help you out, Author explained it here: #97

[SpaceK33z]

Closing, the docs explicitly say that you need to do this:

Three changes are needed:

• add an entry point to the webpack configuration: webpack/hot/dev-server.
• add the new webpack.HotModuleReplacementPlugin() to the webpack configuration.
• add hot: true to the webpack-dev-server configuration to enable HMR on the server.

[brandalorian]

The docs say that the easiest way to use HMR is on the command line:

webpack-dev-server --inline --hot

Its easier if you just set that to npm start in your package.json:

"scripts": {
  "start": "webpack-dev-server --inline --hot"
}

[twelve17]

@SpaceK33z , can you link to the docs you are referring to, that have those three bullet points? The docs for {hot: true} I see, which are here, state:

Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js

(Emphasis mine.)

Am I confusing documentation sources? Or is it that --hot on the CLI has a different effect than {hot: true} in the config?

Update: I found the reference to the docs above: it's in the wiki. There seems to be a bit of inconsistency with the docs. I presume the wiki is the correct one then?

Update 2: I took another pass at reading the docs for the various approaches. As I understand it now:

1. You can run the webpack-dev-server executable from the NPM of the same name, and pass it ---hot --inline, and not need to edit your own config.
2. You can use the webpack-dev-server NPM's API to create your own executable. For this approach, you do need to add the plugin and { hot: true } to your config?

[valgaze]

@twelve17

Few ways to do this:

• CLI: run the command with appropriate flags

• NPM: Same as CLI but simply an entry in your package.json's scripts section which will in turn run the CLI command

• Node API: Use webpack-dev-server programatically

Let's go in reverse order:

You can use the webpack-dev-server NPM's API to create your own executable. For this approach, you do need to add the plugin and { hot: true } to your config?

Not sure what you mean by 'create your own executable' but I'm assuming you mean using the Node (not NPM) API and creating a script you run yourself (ie you're not typing webpack-dev-server but starting webpack-dev-server programmatically.

In this situation (Node API) you'll need to manually modify the entry field of webpack.config.js (see Step I below) and add the plugin (see Step II). Note, however, that {hot: true} should NOT be added to your webpack.config.js because it will have no effect if you're starting webpack-dev-server programmatically. You'll need to pass that in server configuration as a parameter (see Step III below) because otherwise it won't be acknowledged from webpack.config.js by webpack-dev-server:

If you're using dev-server through the Node.js API, 
the options in devServer will be ignored. 
Pass the options as a second parameter instead: new WebpackDevServer(compiler, {...})

(See here: https://webpack.js.org/configuration/dev-server/#devserver)

To take the node API case by itself: You're not using the CLI and instead have written some kind of script where you want to turn on webpack-dev-server and pass in its config

You'll need three things for code updates:

• STEP I Update your webpack.config.js file's entry field with:

entry: ['webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:1337/', 'app/your_app.js'],

• STEP II Update your webpack.config.js file's plugin field with:

plugins: [ new webpack.HotModuleReplacementPlugin() ]

• STEP III Add {hot: true} to the webpack-dev-server's programmatic configuration, it's second parameter-- not webpack.config.js
  ex.

const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.js'); //If this has devServer or not has no effect when run from Nodejs
const compiler = Webpack(webpackConfig);
const opts = {
    hot: true,
    // contentBase, inline, etc lots of options,
}

const server = new WebpackDevServer(compiler, opts); // Notice opts is the second parameter

server.listen(1337, 'localhost', (err) => {
  if (err) {
   console.log('Error', err);
  } else {
   console.log('Starting server on http://localhost:1337');
 }
});

NOTE: To be crystal clear, it does not matter if {hot:true} already exists in devServer of webpack.config.js because when using the Node API the devServer section of webpack.config.js gets ignored Instead the config needs to be explicitly passed as the second parameter of the server like above.

CLI/NPM Case

You can run the webpack-dev-server executable from the NPM of the same name, and pass it ---hot --inline, and not need to edit your own config.

That is correct. (Not sure what you mean by "NPM of the same name"--I think you mean an npm script. You can name it whatever you want and invoke them with npm run your_script_here)

• --inline flag will add the correct to the 'entry' field of your webpack.config.js like in Step I above

• --hot flag will enable Hot Module Reloading-- ie see changes updated without having to hard-reload the entire page by automatically adding the plugin from Step II

Note in the CLI case you CAN assume the devServer configuration from webpack.config.js is acknowledged, so you can either use the CLI flags --hot and --inline OR in the devServer section add hot:true & inline:true)

Side note: For the NodeJS programmatic API case, note that you must manually add the changes to the entry & plugin fields since there can be "no inline: true flag in the webpack-dev-server configuration, because the webpack-dev-server module has no access to the webpack configuration. Instead, the user must add the webpack-dev-server client entry point to the webpack configuration. (This is exactly what we did in Step I in the Node API case above)

Am I confusing documentation sources? Or is it that --hot on the CLI has a different effect than {hot: true} in the config?

If I understand correctly, there is no difference. Pick one or the other 👍

Resources

• Andrew Farmer's HMR overview (less wordy): https://www.javascriptstuff.com/webpack-hmr-tutorial/

• Handy Wiki: https://github.com/webpack/docs/wiki/webpack-dev-server

• Canonical Node API example: https://github.com/webpack/webpack-dev-server/blob/master/examples/api/simple/webpack.config.js

• devServer config ignored when using webpack-dev-server from the Node API: https://webpack.js.org/configuration/dev-server/#devserver

• https://www.javascriptstuff.com/webpack-hmr-tutorial/

[twelve17]

Wow, this answer is way more thorough than I expected. Thanks kindly for elaborating on the nuances between the setups. I will take some time to go through this.