Upgrade from webpack v4 to v5

[GiviMAD]

Hello,

I upgraded some packages in order to build the UI with webpack 5 version, I think (hope) I have not break anything.

The reason to do these is because I want to develop a client for these WIP audio protocol openhab/openhab-core#4032, but for it I need to use a WebWorker and a couple of AudioWorkets and webpack 4 have poor/none support for them, so I though it was better trying to update to webpack 5 instead of battle agains the poor v4 support, hope it's ok.

Please let me know if I need to rework anything or the update is unwanted for whatever reason.

Best regards!

PD: the change that worries me more is the upgrade of the YAML library, but the previous version didn't bundle well with webpack 5 (due to using import/export but having not type module in the package json I think).

[relativeci]

Job #1390: Bundle Size — 11MiB (-30.98%).

0f8db20(current) vs 424e646 main#1388(baseline)

Important

Bundle introduced 3 duplicate packages – View changed duplicate packages

Bundle metrics   10 changes 3 regressions 3 improvements

	Current Job #1390	Baseline Job #1388
Initial JS	1.84MiB(+1.68%)	1.81MiB
Initial CSS	607.73KiB(-0.11%)	608.39KiB
Cache Invalidation	95.87%	94.01%
Chunks	220(+1.38%)	217
Assets	242(-64.57%)	683
Modules	3074(-0.13%)	3078
Duplicate Modules	159(-32.63%)	236
Duplicate Code	1.74%(+0.58%)	1.73%
Packages	150(-1.32%)	152
Duplicate Packages	18(+12.5%)	16

Bundle size by type   4 changes 2 regressions 2 improvements

	Current Job #1390	Baseline Job #1388
JS	9.19MiB (-1.95%)	9.37MiB
CSS	888.86KiB (+2.92%)	863.61KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.24KiB (+1.11%)	1.23KiB
Other	871B (-99.98%)	4.78MiB

---

View job #1390 report View GiviMAD:upgrade/webpack_5 branch activity View project dashboard

[GiviMAD]

@florian-h05 would you be able to give me your thoughts on these?

I don't know enough about the project to know what to test, I have verified production build and dev server are working correctly and I was going around the UI, and tested a Blockly rule, and everything seems to be working.

Also I'm going to create an issue for the Audio client implementation because I need feedback about how to do it, will ping you there, let me know if I bother you too much. Best regards!

[J-N-K]

Please check what was upgraded in #1353. I believe you need to adjust documentation. IIRC upgrading the tooling for everything (except HABOT) is preferred. If you are done, I can try if we can still build on MacOS.

[GiviMAD]

Please check what was upgraded in #1353. I believe you need to adjust documentation. IIRC upgrading the tooling for everything (except HABOT) is preferred. If you are done, I can try if we can still build on MacOS.

Thank you for the reference, I have updated required versions doc.

I have added a last commit:
The command 'dev:blockly' failed, it works correctly without the use of the "source-map-loader" but, with it, it complains about missing library files in the blocky folder (the code is there but in a single bundle, but when enabling the loader it tries to locate the original files there), seems to work correctly without it.
And also I have disabled the service worker plugin when not in production mode because it produces errors with the hot reload functionality. (I think it can be due to I changed filename: 'js/app.[hash].js' to filename: 'js/app.[contenthash].js', but it was recommended on the v4 to v5 migration docs so I think it's better just disable the service-worker while developing).
And I had removed the explicit use of the HotModuleReplacementPlugin because there was a warning saying it's not needed when the hot: true option is provided to the devServer.

[GiviMAD]

I discovered a problem with the hot reload functionality, I have updated the hotUpdateChunkFilename and hotUpdateMainFilename options based on its documentation for webpack 5.

[GiviMAD]

If you are done, I can try if we can still build on MacOS.

@J-N-K I think I'm done now. I tested with OH_APIBASE=http://...:8080 SOURCE_MAPS=1 npm run dev and I couldn't find any other problems, the hot reload works like charm now.

There is these warning on the build:

(node:62511) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.

Which I think is caused by vue-loader version or other plugin that is not in the latest version, but I think we are good to go like these.
Let me know if you find any problems, I'm working on a macOS but not an Apple Silicon one.

[GiviMAD]

I have updated the babel related dependencies as part of another PR (It gave me some problems with the audio worklets) I will move the code to this one.

[florian-h05]

Hello @GiviMAD,
thanks for your PR.

I will try to have a look soon, but looking at the webpack stats, it seems that something went wrong with the compression of CSS, IMG and HTML, as there is a measurable increase in size: #2267 (comment)

[GiviMAD]

Hello @GiviMAD, thanks for your PR.

I will try to have a look soon, but looking at the webpack stats, it seems that something went wrong with the compression of CSS, IMG and HTML, as there is a measurable increase in size: #2267 (comment)

Thank you for the feedback, after looking to the docs again I think I know what could be the problem (or at least a part of it), the equivalent to the previously used url-loader with a limit seems to be type 'asset' not 'asset/resource', I will try the change to see if the numbers became similar.

[GiviMAD]

Seems like the change has solved the problem for the images and slightly improve it for the css.

[florian-h05]

Thank you very much for that PR @GiviMAD!

I have now had a very close look, and after fixing some issues it now looks really good - I have even tested the blockly source maps, they still work.

The deprecation warning is gone now, I have just updated a few plugins you did not update.
FYI I discovered an issue where the SSE event stream was not working with the dev server, this was due to compressed: true now being the default, after setting it to false, SSE worked again.

[florian-h05]

I have encountered a problem with the production build, which I had to fix.
Now I have tested the dev server with and without blockly source maps and the production build (i.e. deploying the org.openhab.ui bundle to my openHAB server) and everything works fine.

I'll now merge this PR.

[GiviMAD]

Thank you so much for fixing the missing things and validate the PR!