Webpack-dev-server: Inline mode in HTML does not work

Created on 6 Jun 2016  路  11Comments  路  Source: webpack/webpack-dev-server

I'm using v1.14.1. Webpack creates my js/bundle.js and copies a bunch of HTML files, including a root index.html using file-loader. As startup command I use

webpack-dev-server --inline --hot --content-base build/

Everything works fine and I can access the site at http://localhost:8080/. Now when I make a change in the original HTML file (in the folder from where file-loader copied it), this does not trigger an automatic refresh. But it does trigger a rebuild. So when I manually refresh the page I can see the change.

It looks like something goes wrong with the automatic refresh. The documentation of automatic refresh only says that "There is also the option to add a reference to the webpack-dev-server client script to the HTML page".

Is the referenced http://localhost:8080/webpack-dev-server.js supposed to be injected by the server? But even if I add it manually to index.html, the automatic refresh does not work.

What am I doing wrong?

question

All 11 comments

check whether the output.publicPath has a value or not? output.publicPath should has a value.

I have a publicPath defined. I double checked in the browser console by changingconsole.log() in one of my bundled files that HMR works fine for my JavaScript bundle. But automatic refresh for HTML pages still does not work.

<script src="http://localhost:8080/webpack-dev-server.js"></script>

is not injected and even if I add it manually, automatic refresh for HTML still does not work.

Some more insight after playing around. When starting webpack-dev-server with

webpack-dev-server --content-base build/ --hot --inline

HMR works fine, but automatic refresh for HTML pages does not work. When I remove the --hot option and start webpack with

webpack-dev-server --content-base build/ --inline

automatic refresh for HTML pages works fine and also refresh for JavaScript. Obviously for JavaScript it's not a hot reload.

Any idea why --hot breaks the HTML auto refresh and is there a way to get both auto refresh for HTML and HMR working, @sokra?

Check your loader tests. If you do something too permissive like {test: /^(?!.*\.(jsx?|css|html)$)/i, loader: 'file-loader'}, something in the socket reloader chain will accidentally run through file-loader and reloading will break without an explicit error.

@mdotasia, do you still have this issue?

I'm closing this issue because of inactivity. Feel free to comment, and we can always re-open it again.

I have the same issue:

webpack-dev-server --content-base src/ --devtool eval --progress --colors --inline

The *.scss and *.js files refresh accordingly. But with html files, something goes wrong.

I haven't a html-loader assigned in the Webpack config file.

I have the same issue. Any helps ?!

same here... :(

sameeee

Files loaded via the contentBase option (on by default, serves current directory), are not automatically live-reloaded by default. This is because you essentially bypass the webpack system with files loaded by contentBase. Since a few months there is the argument --watch-content-base (webpack 2 only), which you can add to fix this. It's not on by default because this might not always be what you want.

If you have any issues, please create a new issue and provide clear instructions on how to reproduce. I'll lock this because I'm not going to waste my time looking at 'same' comments without any useful info.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

uMaxmaxmaximus picture uMaxmaxmaximus  路  3Comments

daryn-k picture daryn-k  路  3Comments

mischkl picture mischkl  路  3Comments

subblue picture subblue  路  3Comments

hnqlvs picture hnqlvs  路  3Comments