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

[happypoulp]

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

• [x] 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?

[benstaker]

I am also experiencing this issue, using webpack-dev-server#2.9.7. Even though I have specified hot: false and do not have the --hot CLI argument.

[shellscape]

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

[byzyk]

Hey @shellscape, I'd like to work on this PR if no one has started yet.
This will be my first contribution to webpack, anything that I should know in advance or any hints where to look up related source files? I'd appreciate that, thanks.

[byzyk]

I guess I fixed it in #1276.

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

[happypoulp]

@byzyk works perfectly, thanks!

[andreyvolokitin]

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.

[benstaker]

@andreyvolokitin I agree, a live: false option would be handy.

[SpaceK33z]

Please test the latest beta, [email protected]. Also be sure to read the changelog.

[sepo27]

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

[kmehmety]

I have the same issue. I solved this problem with "NODE_ENV=production nuxt build"

[alexander-akait]

/cc @kellyrmilligan @sepo27 sorry for delay, problem still exists?

[alexander-akait]

We don't disable hot due DX, but you can disable hot using --no-hot, also in next release you can use --no-live-reload (https://github.com/webpack/webpack-dev-server/issues/1744 and https://github.com/webpack/webpack-dev-server/pull/1812) Closing, thanks for issue

[vcostin]

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:

after using --no-live-reload:

[cben]

--no-watch --no-hot --no-live-reload didn't help for me (on webpack 4.43.0).
Possibly because "devServer.hot option must be disabled or devServer.watchContentBase option must be enabled in order for liveReload to take effect"? (https://v4.webpack.js.org/configuration/dev-server/#devserverlivereload) and disabling hot didn't work? :shrug:

Found kludge workaround: setting watchOptions: {poll: 24*60*60*1000} to a huge period (e.g. 1 day) avoids inotify watching, and re-checks files so rarely that it's effectively never.