Live reloading in webpack-dev-server when using Node.js API

Question

If I set up a very simple webpack project and install webpack-dev-server, when I run "webpack-dev-server --open" from the command line or via an npm script I get live reloading by default. I.e. as soon as I edit a source file then the bundle is rebuilt and the browser is automatically reloaded.

However, if I use the Node API to fire up webpack-dev-server instead, with the following code:

const WebpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.dev');
const open = require('open');

const port = 3000;

let compiler = webpack(webpackConfig);
let server = new WebpackDevServer(compiler, {
  contentBase: "./src",
});

server.listen(port, "localhost", function(err) {
  if(err){
      console.log(err);
  }
  else{
      open('http://localhost:' + port);
  }
});

I loose the live reloading. When I change a source file I can see webpack rebuilds the bundle from the command line output but the browser won't refresh.

Please note that in my case, Hot Module Reloading is not required and is actually not desirable. I just want the page to refresh exactly as it does by default when using the webpack-dev-server CLI.

nicoes · Accepted Answer · 2017-10-22 07:36:54Z

5

I was searching on SO and trying all kinds of things until I found the following for webpack 2/3:

... webpackDevServer.addDevServerEntrypoints(config, options); ...

The Webpack team apparently has added a util to the webpack-dev-server module. See docs for more info: https://webpack.js.org/guides/hot-module-replacement/

For me it works like a charm.

answered Oct 22, 2017 at 7:36

nicoes

931 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Bergot Over a year ago

Thanks! I also needed to move this line before the compiler & devserver creation. I also had to add the host & port in the devserver options (see github.com/webpack/webpack-dev-server/issues/1095)

Shawn Erquhart · Accepted Answer · 2017-06-12 03:29:21Z

2

For every entry in your config, add this: 'webpack-dev-server/client?http://localhost:8080', replacing the url in the query string with whatever your local server url is.

Adding this entry point means you have to use an array for your entry points. This can look one of two ways:

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

entry: {
  a: ['webpack-dev-server/client?http://localhost:8080', 'app.js'],
  b: ['webpack-dev-server/client?http://localhost:8080', 'other.js'],
}

Be sure to only use this in a development specific config.

And that's it! I noticed this detail when watching this YouTube video, so credit goes to the author, but upon further review of the repo, it was in the example all along, just not very obvious.

edited Jun 12, 2017 at 3:29

answered Jun 12, 2017 at 2:59

Shawn Erquhart

1,8582 gold badges17 silver badges32 bronze badges

Comments

Monarch Wadia · Accepted Answer · 2017-10-12 03:16:41Z

0

Leaving this mostly as a note to myself, but others may benefit: this worked for me on Lubuntu inside Virtualbox:

watchOptions: {
  poll: true
}

Note: when using the Node API, the Webpack config devServer option will be ignored, you have to pass in the devServer options like so:

 const s = new WebpackDevServer(compiler, {
  stats: {
    colors: true
  },
  inline: true,
  watchOptions: {
    poll: true
  }
});

answered Oct 12, 2017 at 3:16

Monarch Wadia

5,0944 gold badges40 silver badges39 bronze badges

Collectives™ on Stack Overflow

Live reloading in webpack-dev-server when using Node.js API

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related