Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#51750 closed enhancement (fixed)

Update webpack to version 5.x

Reported by: mukesh27's profile mukesh27 Owned by: gziolo's profile gziolo
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: Build/Test Tools Keywords: has-patch add-to-field-guide
Focuses: javascript Cc:

Description

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

Change History (30)

#1 @desrosj
3 years ago

  • Focuses javascript added
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Update webpack versions for 5.6 to Update webpack to version 5.x
  • Type changed from defect (bug) to enhancement

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.

#2 @desrosj
3 years ago

Related #43731.

#3 @gziolo
3 years ago

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.

#4 @desrosj
3 years ago

Related: #53192.

#5 @desrosj
2 years ago

#54485 was marked as a duplicate.

#6 @desrosj
2 years ago

  • Milestone changed from Future Release to 6.0

This ticket was mentioned in PR #2263 on WordPress/wordpress-develop by walbo.


2 years ago
#7

  • Keywords has-patch added; needs-patch removed

#8 @walbo
2 years ago

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.

gziolo commented on PR #2263:


2 years ago
#9

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?

walbo commented on PR #2263:


2 years ago
#10

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.

gziolo commented on PR #2263:


2 years ago
#11

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

walbo commented on PR #2263:


2 years ago
#12

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

This ticket was mentioned in PR #2519 on WordPress/wordpress-develop by gziolo.


2 years ago
#13

gziolo commented on PR #2263:


2 years ago
#14

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.

walbo commented on PR #2263:


2 years ago
#15

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

gziolo commented on PR #2263:


2 years ago
#16

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

paaljoachim commented on PR #2263:


2 years ago
#17

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.

gziolo commented on PR #2263:


2 years ago
#18

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.

paaljoachim commented on PR #2263:


2 years ago
#19

Thanks for the status update, Greg!

This ticket was mentioned in PR #2561 on WordPress/wordpress-develop by gziolo.


2 years ago
#20

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

gziolo commented on PR #2263:


2 years ago
#21

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.

#22 @gziolo
2 years ago

  • Owner set to gziolo
  • Resolution set to fixed
  • Status changed from new to closed

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.

gziolo commented on PR #2263:


2 years ago
#24

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

walbo commented on PR #2519:


2 years ago
#25

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

#26 @gziolo
2 years ago

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

#28 @gziolo
2 years ago

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.

#29 @milana_cap
2 years ago

  • Keywords has-dev-note added

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

#30 @milana_cap
2 years ago

  • Keywords add-to-field-guide added; has-dev-note removed
Note: See TracTickets for help on using tickets.