[WP5] Webpack5 update #10961

raix · 2021-05-14T17:05:26Z

Webpack 5 update
Includes the work listed in #9994
Replace #10656 and targeting the wp5 branch

Additional changes:

persistent cache
upgrade to dev server ´v4 (still beta)
terser is now included in webpack
comment out test except simple/kitchensink/oldnode
update test matrix to use node 12 + 14 (postcss-normalize requires v12 + webpack 5)

Known issues:

It feels like webpack emits compile twice - triggers a re print out on the screen (might be due to hook behavior change - or some of the code I removed in that area - maybe rewrite?)

Things I wanted to do but left out:

extract loaders/plugins etc. into separate files to make the main webpack config clean / easier to read
allowed domains - we should allow configuration and wildcard support imho
print out performance stats of the build - really hard to track / compare build speeds - eg. detecting regression
fix the test suite or comment out failing tests - eg. the pnp test is currently failing on master not sure if this pr. makes things better or worse
Maybe remove the CRA error overlay as the default webpack overlay is very similar and require less config + code?

Credit include @andriijas, @sebinsua and @jasonwilliams (let me know if I missed out on any)

This reverts commit 3968923.

* upstream/master: Update IMAGE_INLINE_SIZE_LIMIT docs (#10631) Publish Update CHANGELOG Prepare 4.0.3 release update immer to 8.0.1 to address vulnerability (#10412) Upgrade eslint-webpack-plugin to fix opt-out flag (#10590) Bump webpack-dev-server 3.11.0 -> 3.11.1 (#10312) tests: update test case to match the description (#10384) Publish Prepare 4.0.2 release Add opt-out for eslint-webpack-plugin (#10170) Add support for new BUILD_PATH advanced configuration variable (#8986) appTsConfig immutability handling by immer (#10027) Fix CI tests (#10217) docs: add missing override options for Jest config (#9473)

This reverts commit 580ed5d.

References: * [hook rename](TypeStrong/fork-ts-checker-webpack-plugin#490) * [include/exclude](TypeStrong/fork-ts-checker-webpack-plugin#450) and [issue options](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#issues-options) * [release notes 5.0.0](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v5.0.0)

Add css-minimizer-webpack-plugin@1.1.5 Remove optimize-css-assets-webpack-plugin and postcss-safe-parser References: * https://webpack.js.org/plugins/css-minimizer-webpack-plugin/

Reference: * https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales * #10006

…d path

supporting incremental typescript builds

@kumarlachhani

review feedback from @kumarlachhani

This just fixes a shell snippet in the readme file for this plugin

Replace the Github home link with a link to the repo's main page or a link to the source (https://github.com/CodeByZach/pace/blob/master/pace.js)

Bump immer minor version to fix `Prototype Pollution` Security issue.

.href is prefixed with http://localhost etc.

packages/cra-template-typescript/template/gitignore

packages/react-scripts/config/webpackDevServer.config.js

raix · 2021-05-15T13:11:15Z

packages/react-scripts/config/webpack.config.js

@@ -789,18 +795,6 @@ module.exports = function (webpackEnv) {
          },
        }),
    ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell webpack to provide empty mocks for them so importing them works.
-    node: {


This is a breaking change - not sure if we are good by doing that in a minor version bump? (imho we should not confuse new developers by depending on node js builtin shims on the front-end - npm is confusing enough as is)

@slorber

reference: comment by @slorber #9994 (comment)

* upstream/master: test(create-react-app): add integration tests (#10381) Bump immer version for fixing security issue (#10791) Fix link address (#10907) eslint-config-react-app typo fix (#10317)

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/JsonInclusion.js

accordingly to review by @xiaokekeT

This reverts commit 8fdc63b.

Luchanso · 2021-05-26T13:14:18Z

Thank you, it's work, I'll publish temporary package for testing on my own project

karlhorky · 2021-05-28T08:21:09Z

@andriijas awesome that webpack 5 support was merged!

Is this planned to land in 4.1 or 4.2?

cc @iansu @ianschmitz

And thanks to @raix for getting this in!

andriijas · 2021-05-28T08:24:57Z

@karlhorky primary planned to land in some kind of prerelease to gather feedback and test results from real projects and detect edge cases.

Appreciate your eagerness to elevate your stack with webpack 5 but some further patience is needed :)

Also big applause to @raix for his continuous energy to work and make sure this is moving forward! 🙌

evenstensberg · 2021-06-05T14:14:35Z

If you need help with anything from webpack side, we're here 🙌🏾

raix · 2021-06-05T15:00:31Z

Thanks @evenstensberg only issue outstanding is multiple events from the compilatiln hook causing odd "ui" refresh in CLI - I haven't looked further into it, build works - (also had an issue with split/runtime chunks when enabling federated modules - for now reverted the commit but there's likely a config change needed)

Morten N.O. Henriksen and others added 30 commits January 27, 2021 19:36

Revert "Revert "Update postcss packages" (#10216)"

cdb7ec0

This reverts commit 3968923.

Revert "Update postcss packages" (#10216)

79b16d4

This reverts commit 580ed5d.

Update postcss and loader

8d5d16f

Update fork-ts-checker-webpack-plugin 6.0.5

6777da0

Add css-minimizer-webpack-plugin@1.1.5 remove

f959414

Add css-minimizer-webpack-plugin@1.1.5 Remove optimize-css-assets-webpack-plugin and postcss-safe-parser References: * https://webpack.js.org/plugins/css-minimizer-webpack-plugin/

Add support for Webpack 5 message objects

fb56a14

Update WebpackManifestPlugin to v3.0.0

48c5456

Support both "SingleEntryPlugin" and "EntryPlugin"

468ffe6

Support Webpack 5 IgnorePlugin signature

4d0be4a

Reference: * https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales * #10006

Update webpack and dev server

cfee807

Enable persistent cache

38d72e7

Fix react-error-overlay webpack

5bef914

Fix dev server config

58d36c2

Remove support for SingleEntryPlugin

a89a63a

update workbox-webpack-plugin

74ed0c7

Fix post css config

19faf8c

Comment out WebpackManifestPlugin for now having issues with undefine…

bbf93d2

…d path

Add fast refresh entries to ModuleScopePlugin

73c952b

Format files

33f9064

Remove unused variables in start command

5e79ffa

git ignore tsconfig.tsbuildinfo

c0e4c4d

supporting incremental typescript builds

simplify output path

871b2e9

review feedback from @kumarlachhani

Use asset modules in react-scripts

613e2a5

Use asset modules in react-error-overlay

952f896

eslint-config-react-app typo fix (#10317)

651d0db

This just fixes a shell snippet in the readme file for this plugin

Fix link address (#10907)

b680ee7

Replace the Github home link with a link to the repo's main page or a link to the source (https://github.com/CodeByZach/pace/blob/master/pace.js)

Bump immer version for fixing security issue (#10791)

281a868

Bump immer minor version to fix `Prototype Pollution` Security issue.

test(create-react-app): add integration tests (#10381)

7bdeced

Morten N.O. Henriksen added 4 commits May 15, 2021 09:58

Fix kitchen sink get actual href value

819936b

.href is prefixed with http://localhost etc.

Update kitchen sink test to webpack 5 asset modules

96d8f15

Let webpack handle global this

f56887a

Fix eject copy config/webpack/persistentCache folder

73f20aa

raix commented May 15, 2021

View reviewed changes

packages/cra-template-typescript/template/gitignore Outdated Show resolved Hide resolved

raix commented May 15, 2021

View reviewed changes

packages/react-scripts/config/webpackDevServer.config.js Show resolved Hide resolved

raix commented May 15, 2021

View reviewed changes

Morten N.O. Henriksen added 5 commits May 15, 2021 15:20

Move tsbuildinfo into cache folder

9cdf282

Update dependencies

d72116e

Update webpack-dev-server to beta.3

8f81bc7

Compilation.modules changed to type Set

b7f1f2f

reference: comment by @slorber #9994 (comment)

Merge remote-tracking branch 'upstream/master' into webpack5-update

5b35c42

* upstream/master: test(create-react-app): add integration tests (#10381) Bump immer version for fixing security issue (#10791) Fix link address (#10907) eslint-config-react-app typo fix (#10317)

bpowers reviewed May 15, 2021

View reviewed changes

packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/JsonInclusion.js Outdated Show resolved Hide resolved

Morten N.O. Henriksen added 7 commits May 15, 2021 17:18

Format JsonInclusion.js using prettier

c2dbf96

Run prettier on webpack dev server config

35df374

Enable e2e behavior tests using node 12+14

2504864

Comment out e2e behavior tests for now

8976811

Add experimental support for module federation

8fdc63b

Fix missing wds socket path update

28aa672

accordingly to review by @xiaokekeT

Revert "Add experimental support for module federation"

c7c916e

This reverts commit 8fdc63b.

Bluefitdev mentioned this pull request May 19, 2021

PostCSS 8 #9664

Closed

andriijas merged commit aaddb29 into facebook:wp5 May 28, 2021

elevatebart mentioned this pull request Jun 7, 2021

Support webpack 5 vue-styleguidist/vue-styleguidist#1074

Closed

ryota-murakami mentioned this pull request Jul 6, 2021

We need regualr CRA maintainer #11180

Closed

ivanoats mentioned this pull request Feb 26, 2022

Update to webpack 5 terrestris/react-geo#2148

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WP5] Webpack5 update #10961

[WP5] Webpack5 update #10961

raix commented May 14, 2021 •

edited

Loading

raix May 15, 2021

Luchanso commented May 26, 2021

karlhorky commented May 28, 2021 •

edited

Loading

andriijas commented May 28, 2021

evenstensberg commented Jun 5, 2021

raix commented Jun 5, 2021

[WP5] Webpack5 update #10961

[WP5] Webpack5 update #10961

Conversation

raix commented May 14, 2021 • edited Loading

raix May 15, 2021

Choose a reason for hiding this comment

Luchanso commented May 26, 2021

karlhorky commented May 28, 2021 • edited Loading

andriijas commented May 28, 2021

evenstensberg commented Jun 5, 2021

raix commented Jun 5, 2021

raix commented May 14, 2021 •

edited

Loading

karlhorky commented May 28, 2021 •

edited

Loading