Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does it works with Hot Module Replacement? #1

Open
nodkz opened this issue Aug 17, 2015 · 2 comments
Open

Does it works with Hot Module Replacement? #1

nodkz opened this issue Aug 17, 2015 · 2 comments

Comments

@nodkz
Copy link

nodkz commented Aug 17, 2015

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
Copy link
Member

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
Copy link
Author

nodkz commented Aug 20, 2015

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.

@nodkz nodkz mentioned this issue Aug 20, 2015
Open
@temple temple mentioned this issue May 16, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nodkz @tkrullmann