Adding Hot Module Replacement support

[alOneh]

This PR is a patch to provide simply add HMR support if the webpack-dev-server is use.
Sorry I don't know if there is a standard for PR on this repo.

To test, run .node_modules/.bin/encore dev-server and refresh the page of your project, then open the console and you should see [WDS] Hot Module Replacement enabled.

I think I can find a way to test it with the test suite.

[weaverryan]

Hey @alOneh!

Thanks for getting this going :). One of the reasons this hadn't been added yet was that, afaik, even if you enable HMR like this... nothing will actually take advantage of it. I mean, CSS doesn't work with HMR (because we're using the ExtractTextWebpackPlugin), the React HMR stuff isn't configured yet, etc. When we enable HMR, I want it to work with at least one thing behind the scenes. Or (after this PR) does it already work with something and I didn't realize?

Thanks!

[weaverryan]

What about requiring the user to pass the --hot flag in at the command line:

./node_modules/.bin/encore dev-server --hot

Then, we would detect this (similar to how we're intercepting a few options already in the encore executable, like --https) and use it above to conditionally add HotModuleReplacementPlugin. Otherwise, we're forcing the dev-server to only be used with hot mode (I'm not sure if there's an issue with that, but forcing it feels a little weird)

[alOneh]

This patch work with the classic case, getting your browser reloading after updating any css.
I don't understand what's the issue with ExtractTextWebpackPlugin ?

As the guide mention, we don't need a lot of config to get this working.

For React HMR we have to do it differently.

[alOneh]

ok, I get your point ! I find some answer in extract-text-webpack-plugin issues, we can give a try to css-hot-loader to fix our use case.

[weaverryan]

It may not make any difference, but should we also use this.webpackConfig.useHotModuleReplacementPlugin()? for this if statement as well?

[weaverryan]

Very nice updates to the PR! We could definitely merge this without adding any explicit support for anything (yet). I think the PR is basically ready.

About css-hot-loader, I'm definitely interested. It does use a different license (ISC) which could be a problem (update: I don't think the license is a problem - we're already depending on other libraries with other licenses), and I'm dubious on its quality (not a lot of stars, typos in the README). But... the approach makes sense and it would be a great addition.

[weaverryan]

And we may also have this same issue (especially with addStyleEntry: shepherdwind/css-hot-loader#7), though that shouldn't be a blocker.

[weaverryan]

Merged - but see #16 for a small fix. And also, we still need to add explicit support for HMR (i.e. in React... and if possible, with CSS)

[RobinCK]

@weaverryan

For css HMR when using ExtractTextWebpackPlugin
I use the following code added to entryPoint

import hotEmitter from 'webpack/hot/emitter';
//...

if (module.hot) {
  hotEmitter.on('webpackHotUpdate', () => {
    document.querySelectorAll('link[href][rel=stylesheet]').forEach((link) => {
      link.href = link.href.replace(/(\?\d+)?$/, `?${Date.now()}`); // eslint-disable-line
    });
  });
}