-
-
Notifications
You must be signed in to change notification settings - Fork 240
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.
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
Upgrade from webpack v4 to v5 #2267
Conversation
3f275b0
to
9e75c9b
Compare
Job #1390: Bundle Size — 11MiB (-30.98%).Important Bundle introduced 3 duplicate packages – View changed duplicate packages Bundle metrics
Bundle size by type
View job #1390 report View GiviMAD:upgrade/webpack_5 branch activity View project dashboard |
@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! |
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: |
I discovered a problem with the hot reload functionality, I have updated the hotUpdateChunkFilename and hotUpdateMainFilename options based on its documentation for webpack 5. |
@J-N-K I think I'm done now. I tested with There is these warning on the build:
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. |
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. |
Hello @GiviMAD, 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. |
Seems like the change has solved the problem for the images and slightly improve it for the css. |
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Miguel Álvarez <[email protected]>
Signed-off-by: Florian Hotze <[email protected]>
Signed-off-by: Florian Hotze <[email protected]>
Signed-off-by: Florian Hotze <[email protected]>
Signed-off-by: Florian Hotze <[email protected]>
Signed-off-by: Florian Hotze <[email protected]>
c2f4843
to
4593fbe
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
This broke production webpack builds, and it seems that manually adding that plugin is not required: https://webpack.js.org/plugins/module-concatenation-plugin/, and we do not have manually set `optimization.concatenateModules`. Signed-off-by: Florian Hotze <[email protected]>
Signed-off-by: Florian Hotze <[email protected]>
I have encountered a problem with the production build, which I had to fix. I'll now merge this PR. |
Thank you so much for fixing the missing things and validate the PR! |
Regression from openhab#2267. Signed-off-by: Florian Hotze <[email protected]>
Regression from #2267. In #2267 the YAML library was upgraded to a new version, but the usage of the library was not adjusted to breaking changes. This PR fixes all issues discouvered in the browser console. --------- Signed-off-by: Florian Hotze <[email protected]>
Regression from openhab#2267. Signed-off-by: Florian Hotze <[email protected]>
Regression from #2267. This fixes the service-worker and switches from injecting the manifest into a pre-provided service-worker to generating the service-worker during webpack builder. Signed-off-by: Florian Hotze <[email protected]>
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).