Automatic browser refresh without HTML changes

[glenjamin]

on https://christianalfoni.github.io/react-webpack-cookbook/Automatic-browser-refresh.html

Instead of adding http://localhost:8080/webpack-dev-server.js to the HTML, you can add webpack-dev-server/client?http://localhost:8080 to the entry list.

This also makes it easier to disable HMR changes in production builds.

[bebraw]

@glenjamin What if we changed the recommendation to webpack-dev-server inline? That way we wouldn't need an entry at all given it injects one automatically. As a bonus tweaking the ip and port becomes easier.

[glenjamin]

That would work too, the downside being that it's not quite as clear what is going on if you want to tweak the config.

[bebraw]

Ok, I'll change it to what you proposed and link to an alternative resource for inline based setup with a bit different ideas.

[idisblueflash]

I've got error by changing to config of @glenjamin:

What I did:

• remove <script src="http://localhost:8080/webpack-dev-server.js"></script> in my index.html
• and add entry: 'webpack-dev-server/client?http://localhost:8080', in webpack.config.js

I've got a blank page and error on console: [HMR] Waiting for update signal from WDS... TypeError: undefined is not an object (evaluating 'global.WebSocket')

I try to comment // 'webpack-dev-server/client?http://localhost:8080', first page is ok, but I didn't get Automatic browser refresh. Did I miss some thing?

[bebraw]

Any idea @glenjamin? Do you have working configuration to compare against?

[glenjamin]

I'll try and dig one out - I haven't used this for a while as I've moved to using my webpack-dev-middleware instead.

[glenjamin]

Looks like the approach I describe is the same one react-hot-boilerplate currently uses.

https://github.com/gaearon/react-hot-boilerplate/blob/3883f8ac7181aa42eed2485e7c72ea7599d7792e/webpack.config.js

[MacgyverMartins]

I had the some error @idisblueflash and I fix it changing npm script from: "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" to: "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"