Does it works with Hot Module Replacement?

nodkz commented 9 years ago

Try to use it with HMR:

config['entry']['nod.html'] = ['webpack/hot/dev-server', '/Users/nod/www/ps_whmcs/assets/_site/nod.html'];
...
config['plugins'].push(new IndexHtmlPlugin('nod.html', 'nod.html'));

In html file add <script src="http://localhost:8008/webpack-dev-server.js"></script>

When I change the html file, it rebuilds in terminal. In browser console:

[WDS] App updated. Recompiling...
[WDS] App hot update...

But automatic page refresh does not apply.

Can you advise correct config for HMR?

tkrullmann commented 9 years ago

Hi @nodkz, unfortunately the internals of HMR are even more obscure than the rest of webpack, and the docs are a bit contradictory.

I don't have any mention of HMR in my files or webpack config, I just start the dev server with

webpack-dev-server --hot --inline

and keep some other options (like contentBase and port) in the devServer section of the webpack.config.js:

devServer: {
    contentBase: './build',
    port: 8081
}

I tried adding hot: true, inline: true there too, but it doesn't seem to work the same way as with the command line parameters.

At the moment I have little idea of what's actually going on when a live reload happens. My guess is that live-reloading HTML (or even CSS) would require quite a different mechanism than live-reloading JS. The architecture of webpack seems to be very much focused on Javascript, so all plugins dealing with other file types in some way seem like a bit of a workaround. So I'm not sure if live-reloading the other stuff is even possible.

I'll be happy to investigate further on this when I get some time :-)

nodkz commented 9 years ago

Yep, Webpack documentation is very hard and has many white spaces. A spend a lot of time to make it work achieved through trial and error. Now if I change data in entry html, browser automatically refresh page. Hooray! But solution is not so good, as I want. So I provide here my config, may be some make better solution.

package.json
{
   scripts: {
      "hot": "webpack-dev-server",
      ...
   }
   ...
}

which I start via terminal npm run hot Full configuration of dev server I pass to webpack.config.js:

  config['devServer'] = {
        contentBase: './',
        colors: true,
        historyApiFallback: false,  // when false, dev server make directory listing, good feature to navigate in project
        hot: true,
        inline: true,
        progress: true,
        port: 8008
    };

Also in plugins I add

config['plugins'].push(new webpack.HotModuleReplacementPlugin());

Now dev server has configured.

So let configure entry points.

config['entry']['nod.html'] = '/Users/nod/www/ps_whmcs/assets/_site/nod.html';
config['entry']['dev-hot-module-replacement'] = ['webpack/hot/only-dev-server', '/Users/nod/www/ps_whmcs/assets/_site/nod.html'];

As you can see, first line is simple. But second line create dev-hot-module-replacement.js with WDS, HRM and html file itself. This hack let WDS to track changes in entry html file. But HRM can not implement changes [HMR] Cannot apply update. Need to do a full reload!. Because html which packed in js module not connected to page or another module.

So last point is my html file:

<!DOCTYPE html>
<html>
<head>
    <script src="http://localhost:8008/dist/dev-hot-module-replacement.js"></script>
</head>
<body>
    <h1>344</h1>
</body>
</html>

Here we add dev-hot-module-replacement.js which entry point described above.

Now if we change content in entry html file, browser produces page reload.

unbroken-dome / indexhtml-webpack-plugin

Does it works with Hot Module Replacement? #1

So let configure entry points.