48

I know most people have the opposite problem but I actually want to disable the auto reload functionality.

This is how I run my server: 

webpack-dev-server --open --progress

This is my dev server config: 

devServer: {
    contentBase: 'app',
    port: 9005,
    hot: false,
    inline: false
}

Versions:

"webpack": "1.14.0",
"webpack-dev-middleware": "1.9.0",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "2.13.2",
"webpack-md5-hash": "0.0.5"

With this setup webpack dev server opens the initial page as localhost:9005/webpack-dev-server/ with auto reload on (iframe mode). When I set inline to true then it opens localhost:9005 and auto reload is still on (inline mode => websockets).

Is there a way to disable auto reload entirely?

John Weisz
  • 30,137
  • 13
  • 89
  • 132
Pawel Pabich
  • 2,404
  • 4
  • 22
  • 33
  • Stop using webpack-dev-server and just run your build scripts as needed? – ceejayoz Jan 23 '17 at 00:33
  • 3
    I could, but I like my current setup except this one thing. – Pawel Pabich Jan 23 '17 at 00:39
  • 2
    Some of these worked, but still kept on compiling the app on the server side every time there was a change; so I finally resorted to setting `serverConfig.watchOptions.ignored = [/.*/];` when required - which stopped the compilation (and reloading) altogether :) – Janaka Bandara Aug 16 '19 at 15:42
  • 2
    Hot reload is a disaster for me. I make some changes, then it looks like the page reloads, but really it hot-loads. All sorts of error messages about how it can't find this or that, cuz I renamed it. The debugger's no longer has the right line numbers, so I'm feeling around in the dark. I have to reload the page by hand. hot, inline and liveReload are all false. – OsamaBinLogin Jun 06 '21 at 06:03

5 Answers5

33

Working solution for webpack 2.x and 3.x

config.devServer = {
    hot: false,
    inline: false,
}
Igor Alemasow
  • 4,484
  • 2
  • 27
  • 24
  • 3
    `npm run watch -- --no-inline --no-hot` passes these options to *override* what's in the config (via this alias to `webpack-dev-server --config config.js`) – jimmont Jan 28 '19 at 21:58
16

The webpack client scripts are added by default to your bundle (since webpack 2), but you can disable those by adding --no-inline to your CLI command.

spacek33z
  • 2,203
  • 1
  • 25
  • 31
  • 1
    I've tried that and it didn't work. I'm using webpack 1.x, is that option available only in webpack 2.x? I can't find it anywhere: https://webpack.github.io/docs/webpack-dev-server.html nor there https://webpack.github.io/docs/configuration.html – Pawel Pabich Jan 31 '17 at 08:26
  • 1
    Ah, in iframe mode the client script is always included. There are two ways to fix this; 1) Remove `--open` and manually browse to http://localhost:9005/ 2) Add `--lazy`, then it will only recompile when refreshing the page – spacek33z Jan 31 '17 at 09:34
  • 1
    Doesn't seem to help with webpack 3. – mpen Sep 07 '17 at 18:20
  • 2
    Works with Webpack 4 – Sterling Beason Jan 17 '20 at 03:33
11

As a workaround I excluded webpack client side scripts from the bundle. This seems to stop auto reload from happening. I did that by redirecting those script to a null loader.

{test: /webpack-dev-server\\client/, loader: "null-loader"},

Pawel Pabich
  • 2,404
  • 4
  • 22
  • 33
  • For posterity: to get this to work in in webpack2 with webpack-dev-server 2.4.5, I had to modify this a bit. I installed https://github.com/webpack-contrib/null-loader and had to exclude by path: `{test: path.resolve(__dirname, 'node_modules/webpack-dev-server/client'), loader: "null-loader"}` – spirulence Apr 27 '17 at 15:04
  • ^^ This is great. Totally solved the problem. Can you please update your answer to include this extra webpack2 detail? – Ghazgkull Jun 01 '17 at 00:15
7

Here's an update for webpack-dev-server 3.x. Update your config/webpack/development.js like so:

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

const environment = require('./environment');

environment.config.merge({
  devServer: {
    hot: false,
    inline: false,
    liveReload: false
  }
});

module.exports = environment.toWebpackConfig();
Alex Dunae
  • 1,290
  • 3
  • 17
  • 28
3

Didn't find an obvious solution either (webpack-dev-server version 1.16.5).

A partial solution seems to be:

webpack-dev-server --watch-poll 99999999999

This won't rebuild automatically. But it will still reload browser windows after the initial build.

Thomas Weiser
  • 86
  • 3