When using DevServer and the Node.js API, you should not put the dev server option on the Webpack configuration object; instead, it should always be passed as a secondary parameter.

Here, DevServer simply refers to the use of Webpack in development mode as opposed to the watching or production modes. To use DevServer with the Node.js API, follow these steps:

1. The function is placed in the webpack.config.js file, as follows:

new WebpackDevServer(compiler, options)

To enable HMR, the configuration object must first be modified to include the HMR entry points. The webpack-dev-server package includes a method called addDevServerEntryPoints that can be used to do this.

2. What follows is a short example of what it might look like using dev-server.js:

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

  const config = require('./webpack.config.js');
  const options = {
    contentBase: './dist',
    hot: true,
    host: 'localhost'
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});

HMR can be difficult. To demonstrate this, in our example, click the button that has been created in the example web page. It is evident that the console is printing the old function. This is because the event handler is bound to the original function.

3. To resolve this for use with HMR, the binding must be updated to the newer function using module.hot.accept. See the following example using index.js:

  import _ from 'lodash';
  import printMe from './print.js';

  function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'Webpack'], ' ');

    btn.innerHTML = 'Click me and view the console!';
    btn.onclick = printMe;  // onclick event is bind to the 
                            // original printMe function

    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());
  let element = component(); // Store the element to re-render on 
                             // print.js changes
  document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
      printMe();
      document.body.removeChild(element);
      element = component(); 
      document.body.appendChild(element);
    })
  }

By way of explanation, btn.onclick = printMe; is an onclick event that is bound to the original printMe function. let element = component(); will store the element to re-render on any changes to print.js. Also, note the element - component(); statement, which will re-render the component and update the click handler.

This is just one example of the kind of pitfalls that you may encounter. Luckily, Webpack offers a lot of loaders, some of which are discussed later, that make HMR much less problematic. Let's now look at HMR and style sheets.