Update webpack to version 5.x

[mukesh27]

Update webpack version to latest version ​https://www.npmjs.com/package/webpack

[desrosj]

Just a note that any update to Webpack needs to be a coordinated effort with the block editor team in the Gutenberg repository to ensure both spots use the same version.

It's also unlikely that this update will be as straightforward as changing the version number and updating as there are many breaking changes. A full breakdown of the changes in Webpack 5.x can be found here: ​https://webpack.js.org/blog/2020-10-10-webpack-5-release/. We should also look at the changes in 5.x and see if there are any new features that can be utilized.

I'm going to move this to Future Release because it's unlikely this will happen in time for 5.6.

[desrosj]

Related #43731.

[gziolo]

I wanted to cross-reference the first failed attempt to updated webpack in Gutenberg: ​https://github.com/WordPress/gutenberg/pull/26382

Gutenberg build was working correctly, but some tools like Storybook and @wordpress/scripts stopped working because of some compatibility issues. We should give it another try in the next weeks.

Just a note that any update to Webpack needs to be a coordinated effort with the block editor team in the Gutenberg repository to ensure both spots use the same version.

@desrosj, do you anticipate any issues if we would start using different versions of webpack? As far as I can tell, Jarda landed all necessary changes to make v4 and v5 compatible in separate PRs, including changes to @wordpress/dependency-extraction-webpack-plugin that Calypso uses already with webpack 5. If you look at the PR I shared the number of changes is fairly minimal.

[desrosj]

Related: #53192.

[desrosj]

#54485 was marked as a duplicate.

Trac ticket: https://core.trac.wordpress.org/ticket/51750

[walbo]

Added a PR that updates webpack and related depenedcies to latest version.

Would be great to get some more eyes on it and help testing.

Great work. I'll have a closer look next week. Are there more differences like the one I commented about in ​https://github.com/WordPress/wordpress-develop/pull/2263#discussion_r799210841? I know that CopyWebpackPlugin has a different API with webpack 5, anything else that comes to your mind?

Great work. I'll have a closer look next week. Are there more differences like the one I commented about in ​#2263 (comment)? I know that CopyWebpackPlugin has a different API with webpack 5, anything else that comes to your mind?

Other than CopyWebpackPlugin, the biggest difference is the removal of @wordpress/custom-templated-path-webpack-plugin and @wordpress/library-export-default-webpack-plugin. This can now be fixed directly in the ​`entry` config.

@walbo, any chances to bring this PR up to date? I'd love to land that before updating WordPress packages in core for the upcoming WordPress 6.0 release.

@gziolo Yes, I can do that. Will try to make it happen later today, if not I'll to it tomorrow.

Trac ticket: https://core.trac.wordpress.org/ticket/51750

Depends on #2263.

This PR will unblock ​https://github.com/WordPress/wordpress-develop/pull/2519 which brings React Fast Refresh support to WordPress core for block development with @wordpress/scripts.

@gziolo The PR should be up to date. Added a couple of comments.

We can use the PR with webpack 5 upgrade in Gutenberg as a reference: ​https://github.com/WordPress/gutenberg/pull/33818

I noticed that this PR is included in the ​WordPress 6.0 Project board.
I assume based on @gziolo comment that it should be removed from the project board. Please remove it from the project board if that is the case.

I noticed that this PR is included in the ​WordPress 6.0 Project board.
I assume based on @gziolo comment that it should be removed from the project board. Please remove it if that is the case.

Yes, it's correctly included. I asked the Build/Test Tools component maintainers to run additional checks with the intention to land it before WordPress 6.0 Beta 1.

Thanks for the status update, Greg!

Follow-up for ​https://github.com/WordPress/wordpress-develop/pull/2263 from @walbo. I had to rebase the original branch with the latest changes in trunk. I also updated a few more development packages.

Trac ticket: https://core.trac.wordpress.org/ticket/51750

I'm preparing the final patch to land in WordPress core so I opened ​https://github.com/WordPress/wordpress-develop/pull/2561 to ensure that CI checks remain green after rebasing and resolving conflicts with trunk.

[gziolo]

In 53135:

Build: Update webpack to v5.x

Update webpack version to latest version ​https://www.npmjs.com/package/webpack. This aligns closer with how the Gutenberg plugin handles WordPress packages. Related update in Gutenberg from August 2021: ​https://github.com/WordPress/gutenberg/pull/33818.

Props walbo, desrosj, mukesh27.
Fixes #51750.

Committed with https://core.trac.wordpress.org/changeset/53135.

Committed with https://core.trac.wordpress.org/changeset/53135. Major props to @walbo for making it happen! 🎉

Tested and works as expected (tested in firefox and chrome with wp-scripts). 🎉

[gziolo]

In 53140:

Build: Enable React Fast Refresh for block development

Brings the same functionality introduced in the Gutenberg plugin with ​https://github.com/WordPress/gutenberg/pull/28273. In effect, it brings React Fast Refresh support to WordPress core for block development with @wordpress/scripts.

Props walbo, antonvlasenko.
See #51750, #55505.
Follow-up [53135].

Committed with https://core.trac.wordpress.org/changeset/53140.

[gziolo]

In 53141:

Build: Bring caniuse-lite to the latest version

This ensures that build tools target the most recent version of browsers supported by WordPress.

Follow-up [53135].
See #51750, #55505.

[milana_cap]

I'm marking this for dev note but it's really just mentioning it in Field guide.