andrewagain / webpack-hmr-3-ways

Three ways to set up your webpack hot module replacement: webpack-dev-server CLI, webpack-dev-server API, and express with webpack-hot-middleware.

HMR 3 Ways

There are 3 ways to use Webpack HMR. This repository contains a minimal example of each way. In order from simplest to most complex:

• Using the webpack-dev-server CLI
• Using the webpack-dev-server API
• Using express and webpack-hot-middleware

Here is a short discussion on how to pick the method you want to use.

• If you want the simplest possible setup then use the webpack-dev-server CLI.

• If you are using a task runner like grunt or gulp you'll want to use the webpack-dev-server API.

• Or similarly, if you have your own node scripts to run webpack, you'll want to use the webpack-dev-server API.

• If you are already using express for your website, or you need to run other services in development, you'll want to use webpack-hot-middleware.

About the Code

The browser javascript code within each directory is the same. There are 3 files:

js/index.js: Entry point. require()s the other 2 files, box-creator.js and math-doer.js.

js/math-doer.js: An extremely simple file to illustrate that dependencies are automatically updated by HMR.

js/box-creator.js: An example of a dependency that has side effects, with an example of how to use module.hot.dispose to handle such side effects.

webpack-hmr-3-ways's Issues

document.writeln vs console.log

Thanks @ahfarmer for your posts and repos.

You mention in the source code
// console.log statements are reprinted on every reload.

Can you explain if I replace console.log with document.writeln it doesn't reload?

Why there is "if (module.hot){ ... }" ?

When I delete "document.body.appendChild(sideEffectNode);", and re-add this line, the hmr does not work. What should I do to make hmr work under any condition?

What's the best way to prevent the middleware approach from running in production?

Should I detect NODE_ENV and run the middleware conditionally? Something like this:

if (process.env.NODE_ENV != 'production') {
  app.use(webpackDevMiddleware);
  app.use(webpackHotMiddleware);
}

Or is there a better approach?