webpack-dev-server: Don't enable HMR by default

Please note that this template is not optional. If you proceed with this form, please fill out all fields, or your issue may be closed as “invalid.” Please do not delete this template. Please ask questions on StackOverflow or the webpack Gitter (https://gitter.im/webpack/webpack). General questions, how-to questions, and support requests will be closed. Please do remove this header to acknowledge this message.

Operating System: OSX 10.11.6
Node Version: v8.9.1
NPM Version: 5.5.1
webpack Version: 3.10.0
webpack-dev-server Version: 2.9.7

This is a bug
This is a feature request
This is a modification request

Code

  // webpack.config.js
{
  "entry": {
    "app": [
      "/Users/project/src/index.js",
    ]
  },
  "output": {
    "filename": "[name]-[chunkhash].js",
    "path": "/Users/project/build",
    "publicPath": "/"
  },
  "devServer": {
    "contentBase": "./build",
    "disableHostCheck": true,
    "historyApiFallback": true,
    "host": "127.0.0.1",
    "port": 8080
  },
  "resolve": {
    "symlinks": false,
    "modules": [
      "/Users/project/src",
      "node_modules"
    ],
    "alias": {
      "react": "/Users/project/node_modules/react"
    }
  },
  "module": {},
  "plugins": [],
  "devtool": "inline-source-map"
}

  # command used to run webpack dev server
  ./node_modules/.bin/webpack-dev-server --config webpack.config.js --progress --colors

Expected Behavior

When no options to activate HMR is provided, HMR should NOT be enabled. When modifying a source file watched by webpack, webpack-dev-server should not try to hot reload a module and it should not reload the full page either.

Actual Behavior

Even though I did not provided --hot (or --hot --inline) on the command line used to run webpack-dev-server and even though my devServer config does not contain hot: true or false, or hotOnly: true or false, when modifying a source file watched by webpack, it reloads the full page. Note that trying to provide hot: false, hotOnly: false to the devServer config does not disable HMR either.

For Bugs; How can we reproduce the behavior?

To reproduce the issue, clone this repo: https://github.com/happypoulp/webpack3-issue/, go to branch issue-hmr-disable, build and start app and you will see the issue when changing and saving src/index.js.

For Features; What is the motivation and/or use-case for the feature?

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 15 (7 by maintainers)

Most upvoted comments

Hot Module Replacement (HMR) — is a hot reloading of modules (js/css/files). Reloading a full browser page is not HMR, it is a separate feature (sometimes called “live reload”: when the source file changes the browser page is fully reloaded to apply these changes). So there is HMR and there is “live reload”. When source files are changed — these changes are expected to be delivered to the browser in one way or another (HMR or “live reload”). So webpack-dev-server uses HMR when it is on (hot: true) (though it wrongly does not reload HTML in that case as per #1271), and it uses “live reload” when HMR is off. Considering all that — the current behavior is actually correct (despite #1271 which needs fixing), because webpack-dev-server is expected to sync source files changes with the browser page somehow. You want to completely turn off this syncing, so there is no HMR and no “live reload”. The proper way to do it is to implement a new option i.e. live: false which will turn off “live reload”. But what you want instead is to disable “live reload” by disabling HMR, which is wrong.

andreyvolokitin on Jan 19, 2018

We’ll happily review a PR to resolve this issue.

shellscape on Jan 9, 2018

Disabling live reload webpack-dev-server --no-live-reload

I had real hard time finding --no-live-reload flag, some how I’ve ended here. So the behaviour was that hot replacement was applied but after that the page was reloaded any way, that was driving me nuts. Now it works with HMR as expected.

before using --no-live-reload: Screen Shot 2019-05-29 at 18 10 52

after using --no-live-reload: Screen Shot 2019-05-29 at 18 09 10

vcostin on May 29, 2019

Same here for "webpack-dev-server": "^3.1.4". Actually i’ve struggled a bit to figure different modes. Here is what i found:

To disable all “live updates”

unset output.publicPath Turned out this setting is the real one that controls any “live updates” / HMR.

“Live updates” mode

set output.publicPath (of the webpack config itself; devServer one won’t work)
run webpack-dev-server

HMR mode

set output.publicPath
add new webpack.HotModuleReplacementPlugin()
set devServer.httpOnly flag (seems like devServer.hot doesn’t work at all)
add module.hot into index.js:

    const renderApp = () => {
      const App = require('./App').App;
      render(
        <App />,
        document.getElementById('root'),
      );
    };
    
    if (module.hot) {
      module.hot.accept('./modules/core/App', () => {
        console.log('=== Hot reloading the app...');
        renderApp();
      });
    }
    
    renderApp();

run webpack-dev-server

Watch mode

disable live updates (see above)
set watch flag (webpack config)
run webpack-dev-server
run webpack build

sepo27 on May 27, 2018

I guess I fixed it in #1276.

@happypoulp, @benstaker can you check if the fix worked for you?

byzyk on Jan 15, 2018