Webpack-hot-middleware: Force page reload when reload needed.

Created on 28 Feb 2017  路  4Comments  路  Source: webpack-contrib/webpack-hot-middleware

I currently have a situation where I would like to disable HMR and just do a page reload when a file is changed, this is because of a current issue with Vue not working with the HMR when used with plain .js files as opposed to .vue files.

I have simply removed this line:

if (module.hot) {
    module.hot.accept();
}

which returns the following message in the console when files are changed:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.

Now in an ideal world I would like the browser to refresh when this message is showing is this something I can implement easily without removing webpack-hot-middleware I don't want to have to remove the plugin in the event that the above Vue issue is resolved.

Cheers.

Most helpful comment

Hey @glenjamin actually scratch that I was passing reload: true through like so:

const settings = middleware(compiler, {
    publicPath: dev.output.publicPath,
    path: `http://${config.host}:${config.port}/__webpack_hmr`,
    reload: true,
    quiet: true
});

But when I added it like this:

base.entry.unshift(
    // hot-middleware allows us to still have HMR even when connected to the electron server
    `webpack-hot-middleware/client?reload=true`
);

It worked, any reason why this would be? And if so would it be possible to add to add it via the options objects I try to avoid the query string URL format.

All 4 comments

Add reload=true to the querystring option of the client entry point in your webpack config.

Hey @glenjamin I do have that and still seem to be running into this, out of curiosity could it be to do with electron?

Hey @glenjamin actually scratch that I was passing reload: true through like so:

const settings = middleware(compiler, {
    publicPath: dev.output.publicPath,
    path: `http://${config.host}:${config.port}/__webpack_hmr`,
    reload: true,
    quiet: true
});

But when I added it like this:

base.entry.unshift(
    // hot-middleware allows us to still have HMR even when connected to the electron server
    `webpack-hot-middleware/client?reload=true`
);

It worked, any reason why this would be? And if so would it be possible to add to add it via the options objects I try to avoid the query string URL format.

The first one is adding config to the server, the second one is adding config to the client.

Reloading is a client setting, so has to be done on the client. If there's another way to pass config to client bundles like that i'm not aware of it - you'd have to ask around in webpack support.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lili21 picture lili21  路  6Comments

Yizhachok picture Yizhachok  路  6Comments

erikakers picture erikakers  路  11Comments

benjarwar picture benjarwar  路  10Comments

wangmeng1991 picture wangmeng1991  路  7Comments