Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable webpack dev server auto reload?

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?

like image 433
Pawel Pabich Avatar asked Jan 23 '17 00:01

Pawel Pabich


People also ask

How do I disable HMR in Webpack?

You can put hotreload=false anywhere in the query string, even #hotreload=false works. You will still get: [WDS] App updated. Recompiling...

How do I stop a Webpack server?

Type: Ctrl+C once.

What is Webpack hot reload?

Developing a JavaScript application involves reloading the browser each time you save code changes in order to refresh the user interface. Developer tools like Webpack can even run in watch mode to monitor your project files for changes.

How does Webpack Devserver work?

When you run webpack dev server what webpack dev server does is, instead of creating a bundled file ( e.g. bundle. js ) in dist folder, it creates a bundled file in memory. It then serves that information to express , and then express creates a web socket connection to render that on the browser on a certain port no.


5 Answers

Working solution for webpack 2.x and 3.x

config.devServer = {
    hot: false,
    inline: false,
}
like image 69
Igor Alemasow Avatar answered Sep 30 '22 01:09

Igor Alemasow


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.

like image 44
spacek33z Avatar answered Sep 29 '22 23:09

spacek33z


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"},

like image 39
Pawel Pabich Avatar answered Sep 30 '22 00:09

Pawel Pabich


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();
like image 40
Alex Dunae Avatar answered Sep 29 '22 23:09

Alex Dunae


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.

like image 23
Thomas Weiser Avatar answered Sep 30 '22 00:09

Thomas Weiser