Update to Webpack v5

[chihsuan]

Recently I tried to build with [email protected] but encounter an error due to optional chaining operators. I found it's a webpack issue that Webpack v4 doesn't support it.

I've updated the exclude option of babel-loader as a webpack4 solution in this commit c986711.

But I think we should consider updating to Webpack v5.

[joelclimbsthings]

Thanks @chihsuan , I was just about to create this same issue, and came across yours! Just noting here that this was attempted shortly after Webpack 5 was released, but aborted due to the lack of support from various plugins.

It's definitely time to revisit, as this is also a blocker for my css-in-js efforts.

[adrianduffell]

Just noting here that #5502 shortly after Webpack 5 was released, but aborted due to the lack of support from various plugins.

Thanks for sharing this @joelclimbsthings !

I think our next step will be to investigate whether all the plugins now support webpack 5.

From the previous issue:

This is blocked currently by issues with several dependant plugins that rely on webpack 4 deprecations. I'd really like those deprecations sorted before we migrate to webpack 5.

[joelclimbsthings]

Agreed @adrianduffell , I actually started looking at this the other day. This was a fairly cursory survey, but since it looks like you may pull this into your sprint I'll share my (perhaps incomplete) findings here:

---

copy-webpack-plugin
Supports Webpack 5?
Yes

eslint-import-resolver-webpack
Supports Webpack 5?
Yes

fork-ts-checker-webpack-plugin
Supports Webpack 5?
Yes

moment-timezone-data-webpack-plugin
Supports Webpack **5?**
Yes

terser-webpack-plugin
Supports Webpack 5?
Yes.
Note: This is now built into Webpack if you're not customizing it.

webpack-rtl-plugin
Supports Webpack 5?
Sounds like there are deprecation warnings, with a PR created to fix this.

@woocommerce/dependency-extraction-webpack-plugin
Located in our repo, with dependency on @wordpress/dependency-extraction-webpack-plugin that does seem to support Webpack 5.

@wordpress/custom-templated-path-webpack-plugin
Supports Webpack 5?
Sounds like it.

@automattic/mini-css-extract-plugin-with-rtl
Supports Webpack 5?
No, hasn't been modified in a couple years. Belongs to A8C, so hopefully not too difficult to work around or update this.

webpack-bundle-analyzer
Supports Webpack 5?
Yes

webpack-fix-style-only-entries
Supports Webpack 5?
Yes, but need to use https://github.com/webdiscus/webpack-remove-empty-scripts for WP 5

[adrianduffell]

Awesome, thanks @joelclimbsthings !