pkg: Use webpack 5 by default

[ntucker]

Since webpack 5 is final, let's use it as primary target. Webpack 4 will still be supported for the foreseeable future.

Build times

Done on examples/typescript project (with antd). Machine: Threadripper 2950x, Samsung 970 Pro, WSL2 on Win10.

4:

Cold prod build: ~28 seconds
Hot prod build: ~17 seconds
Aggregate size: 327kb gzip
Entry size (vendor non-react): 67kb gzip

5:

Cold prod build: ~17 seconds
Hot prod build: ~5 seconds
Aggregate size: 298kb gzip
Entry size (vendor non-react): 53kb gzip

Improvement:

• 3.4x faster hot builds
• 65% faster cold builds
• 26% Entrypoint size reduction

Must fix:

• TypeError: Cannot read property 'length' of undefined: Filesystem Cache is throwing TypeError: Cannot read property 'length' of undefined from ResolverCachePlugin webpack/webpack#11668 fix compatibility with the filesystem cache webpack-contrib/sass-loader#896
• Polyfill node apis for packages
  • General background: https://medium.com/@sanchit3b/how-to-polyfill-node-core-modules-in-webpack-5-905c1f5504a0
  • Next.js's solution: Add browser polyfils for Node.js modules (webpack 5 backwards compat) vercel/next.js#16022
• Don't break when using our custom args that webpack doesn't recognize
  • Switch to env.param - However, this currently doesn't work in cli v4 - Enhance env flag support webpack/webpack-cli#1932
• Prod builds don't include css from node_modules

Warnings:

• "Chunk.hasEntryModule: Use new ChunkGraph API" - webpack-fix-style-only-entries - Webpack 5 warnings fqborges/webpack-fix-style-only-entries#31
• "Compilation.assets will be frozen in future" - html-webpack-plguin: Webpack 5 "BREAKING CHANGE" warning jantimon/html-webpack-plugin#1501
• "<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item [redacted]/anansi/node_modules/@babel/core/node_modules/@babel/template isn't a directory or doesn't contain a package.json"
• "[DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback." [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] error when using --watch flag webpack/webpack-cli#1918

Future work:

• html-webpack-plugin v5 - drops v4 webpack support
• css-loader v5 - drops webpack 4 support

Other changes:

• Don't hoist storybook things so it doesn't break with plugin version mismatches

Testing:

• both dev, prod, analyze commands
• Tested on webpack 4 and 5

[ljharb]

This isn't a good idea unless we can restore "everyone else's" behavior of polyfilling node core modules, which is required to correctly bundle node modules.

[ntucker]

@ljharb Yeah, I saw that in people's reactions to webpack 5. I'll add a TODO item here to incorporate that behavior so this doesn't land without solving that problem.

[ljharb]

seems more reliable to use the semver library here, but i suppose by the time webpack 40 comes out, this code will be different :-p

[ntucker]

exactly. deprecating 4 support will happen long before then :P