CODEWITHSUNDEEP
webpackwebpack-dev-server
John
John

Reputation: 2825

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

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.

Upvotes: 2

Views: 3117

Answers (3)

nicoes
nicoes

Reputation: 93

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.

Upvotes: 5

Monarch Wadia
Monarch Wadia

Reputation: 4956

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

Upvotes: 0

Shawn Erquhart
Shawn Erquhart

Reputation: 1858

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.

Upvotes: 2

Related Questions