Re-add webpack-dev-server and configure Hot Module Replacement
#8494
Conversation
webpack-dev-server and configure hot module reload
webpack-dev-server and configure hot module reloadwebpack-dev-server and configure Hot Module Replacement
|
Seems there is an issue with HMR for the flexible theme as the flexible theme backend entry is overlapped by the one we use earlier (with the template studio and more). We could however fix that by changing the entry to something like. That would not break any backend theme since it's internal anyways -> eb15149 |
|
The changes look good in general. I'm not sure we actually need I use But maybe @m-vo has a different opinion for creating stuff like the Template Studio? If not I would actually recommend to just drop this, because its just something only for the core-team that we need to maintain and will eventually break again in a next major update. |
|
@aschempp I slightly agree with not needing something like HMR for a bundle, however it may help with development and make it easier. We could also adapt the current config to watch templates. Thus saying, even our backend JS assets are being watched so they trigger the HMR, potentially helping us in development.
Mind that the
I actually configured it for #8012 and thought it might be a good idea to actually "fix/implement" it for contao/contao as well. I don't mind dropping it completely but at least there may be a configuration that can be copy-pasted then :). Will wait what m-vo has to say |
|
HMR, while sometimes being a bit tricky to set up, makes for a really nice DX, especially when working with styles. I think I would keep it, now that it's working in this PR. It's not that we need to maintain it forever, should problems arise in the future? (it's just our tooling) |
Description
The release of webpack-encore v5 dropped the webpack-dev-server as a dependency and is considered a BC Break, basically why our current config doesn't work:
#8371 (comment)
This PR adds
webpack-dev-serverin v5 as a dependency and adds some configuration to enable hot module reload.Running one devServer for both configurations
The current configuration within the
webpack.config.jschecks for the CSS files within the following two paths:Changes that are detected in these styles will trigger the reload of the page, thus making it easier for us to work with our assets.
As of right now we have 2 Encore configurations, thus kicking out the devServer from the second configuration (as you would have to tie it to another port). The first configuration actually embeds the output path of the backend theme
flexibleso it works both ways.Should this be a Bugfix and backported to 5.3?
The dev-server has been broken since changing to webpack-encore ^v5 but this is more for DX when working on contao. Backporting this change could be done in a separate PR but I don't think it's really necessary.