Skip to content

Re-add webpack-dev-server and configure hot module replacement#8494

Merged
leofeyer merged 21 commits intocontao:5.xfrom
zoglo:chore/dev-server
Sep 8, 2025
Merged

Re-add webpack-dev-server and configure hot module replacement#8494
leofeyer merged 21 commits intocontao:5.xfrom
zoglo:chore/dev-server

Conversation

@zoglo
Copy link
Copy Markdown
Member

@zoglo zoglo commented Jun 28, 2025

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)

yes it is unrelated, but I noticed it does not work at all 🙃

This PR adds webpack-dev-server in v5 as a dependency and adds some configuration to enable hot module reload.

image


Running one devServer for both configurations

The current configuration within the webpack.config.js checks for the CSS files within the following two paths:

  • core-bundle/assets/styles/*
  • core-bundle/contao/themes/flexible/styles/*

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 flexible so 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.

@zoglo zoglo requested a review from leofeyer as a code owner June 28, 2025 15:06
@zoglo zoglo changed the title Re-Add webpack-dev-server and configure HMR Re-Add webpack-dev-server and configure hot module reload Jun 28, 2025
@zoglo zoglo added this to the 5.6 milestone Jun 28, 2025
@zoglo zoglo requested a review from aschempp June 28, 2025 15:15
@zoglo zoglo changed the title Re-Add webpack-dev-server and configure hot module reload Re-add webpack-dev-server and configure Hot Module Replacement Jun 28, 2025
@zoglo
Copy link
Copy Markdown
Member Author

zoglo commented Jun 28, 2025

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.
.addEntry('contao-backend', './core-bundle/assets/backend.js')

That would not break any backend theme since it's internal anyways -> eb15149

@aschempp
Copy link
Copy Markdown
Member

The changes look good in general. I'm not sure we actually need dev-server for a bundle? The only advantage of dev-server over watch is HMR as far as I know. It also ever only works in Firefox for me (because I'm too lazy to configure domain stuff).

I use dev-server when building websites, since thats a lot of changes in CSS and scripts. But I have also configured Webpack to reload the page if I change Twig templates etc.
I did quite a few backend things for Contao recently, I never thought about this would be easier with HMT.

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.

@zoglo
Copy link
Copy Markdown
Member Author

zoglo commented Jun 29, 2025

@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.

It also ever only works in Firefox for me (because I'm too lazy to configure domain stuff).

Mind that the allowedHosts: 'all' is bypassing the configuration. Current config also works on Firefox and Chrome for me, I couldn't test it on Safari yet.

I never thought about this would be easier with HMT.

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

@m-vo
Copy link
Copy Markdown
Member

m-vo commented Jun 29, 2025

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)

@aschempp aschempp added the up for discussion Issues and PRs which will be discussed in our monthly calls. label Jul 2, 2025
zoglo added a commit to zoglo/contao that referenced this pull request Aug 1, 2025
@leofeyer leofeyer removed the up for discussion Issues and PRs which will be discussed in our monthly calls. label Aug 21, 2025
@zoglo zoglo modified the milestones: 5.6, 5.7 Aug 21, 2025
@zoglo zoglo removed the request for review from aschempp August 21, 2025 14:46
Signed-off-by: Sebastian Zoglowek <[email protected]>
@zoglo
Copy link
Copy Markdown
Member Author

zoglo commented Aug 21, 2025

Ready to review yet again @leofeyer

Comment thread core-bundle/contao/templates/backend/be_alerts.html5 Outdated
Comment thread webpack.config.js Outdated
@zoglo zoglo requested a review from leofeyer September 5, 2025 16:35
Comment thread webpack.config.js Outdated
@leofeyer leofeyer changed the title Re-add webpack-dev-server and configure Hot Module Replacement Re-add webpack-dev-server and configure hot module replacement Sep 8, 2025
@leofeyer leofeyer merged commit aff9deb into contao:5.x Sep 8, 2025
32 of 35 checks passed
@leofeyer
Copy link
Copy Markdown
Member

leofeyer commented Sep 8, 2025

Thank you @zoglo.

@zoglo zoglo deleted the chore/dev-server branch September 13, 2025 15:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants