webpack 5 beta feedback

🎉 Thanks for being brave and donating your valuable time to testing unfinished beta software 🎉

webpack 5 is in beta phase now. This means major changes and features are done. Major breaking changes have been added. Basic backward-compatibility has been added.

We want to use the beta phase to do the following:

Let a boarder range of users test the beta version.
Find bugs in new features.
Find regressions in old features.
Find places where a compat-layer can be added to avoid breaking changes.
Improve the migration guide and changelog.

We want to reach these goals after the beta phase:

Old features are very stable
New features are a bit stable
Backward-compatibility layer allows most existing plugins/loader to work unmodified (potentially with deprecation warnings)
There clear way how to migrate from webpack 4 to 5
There are experimental webpack 5 branches for higher-level tools (like angular-cli, vue-cli, create-react-app, ...) (at least 2)

To help with testing you can do the following:

Always test with the latest webpack beta version, as problems might already be fixed there
When using webpack directly:
- Follow the migration guide
- Report or add missing steps in the migration guide
- Report problems during the migration
- Report problems with the build after the migration
When using a higher-level tool:
- Check if there is a branch/Pull Request for webpack 5
- Follow guide there
- Report problems in the Pull Request
Make sure to also report (positive) experience
- Performance comparison
- Size comparison
- DX comparison
Try new features
- Enable persistent caching -> guide
- Enable Top Level Await
- Enable the new asset module type
- Enable Long Term Caching
- Try to break filesystem watching
Trace back deprecation warnings with node --trace-deprecation
- Help upgrading plugins/loaders
Make sure to follow beta releases
- Retest newer version to avoid regressions in beta versions
Consider sponsoring webpack when this version
- increases your productivity with better build performance
- increases your productivity with better developer experience
- increases your consumer happiness with better application performance
- make you happy in some other way...

Known problems:

eval() causes problems with the optimization.innerGraph (production).
libraryTarget: "module" is not implemented yet
devtools don't support persistent caching yet
Persistent Cache file include absolute paths are are not portable yet
import.meta is still missing
prefetching doesn't work for WASM yet
CLI arguments doesn't contribute to cache version
~~stack trace is incorrectly displayed in stats~~
Build Time is a bit higher for non-cached builds. Possible reasons:
- tracking extra information in the resolver for safe caching
mini-css-extract-plugin is not able to persistent cache yet
Crashes when using lintDirtyModulesOnly and webpack 5.beta0 stylelint-webpack-plugin#187
svg-sprite-loader doesn't work
There is no warning for Buffer or process yet.

Planned breaking changes:

~~devtool options will be more restrictive~~
Internal HMR API for plugins will probably change
~~Disable some webpack-only syntax by default: require.ensure, require.include~~
terser-webpack-plugin will be upgraded
~~cache.store != "pack" will be removed~~

Automatic Node.js Polyfills Removed
Please provide us with feedback whether you like or dislike the above mentioned change

Many thanks for that from my side. I can not understand how people could write frontend code without realizing what dependencies they actually use..

Do not edit files in node_modules directly unless you opt-out of this optimization with cache.managedPaths: []

This is generally fine, but it would be really great if we could opt-out of this with some flag passed into the webpack. There are cases when editing node_modules helps in debugging problems in dependencies and editing the config to opt-out of this for a "brief" moment is not really that ergonomic. For context e.g. Jest allows this with --no-cache

For context e.g. Jest allows this with --no-cache

You can request that for webpack-cli, which can set cache: false.

Diving into updating our webpack-based tool and I read about setting these for HTTP2:
maxInitialRequests: 30, maxAsyncRequests: 30, maxSize: 100_000
Where do these numbers come from; has this been tested or something? Thanks!

what about options like a --mode production, --env.file and etc. Is that dep?

what about options like a --mode production, --env.file and etc. Is that dep?

This is currently unhandled. We need to find a solution for this in the CLI.

I have a node target and this optimization configuration

 optimization: {
    chunkIds: 'named',
    splitChunks: {
        chunks: 'all'
    },
}

and got this error:

89% chunk assets processingError: Conflict: Multiple chunks emit assets to the same filename server.js (chunks server and vendors-node_modules_alfabank_base-layer_index_js-node_modules_alfabank_container_index_js-no-8997df)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compilation.js:2317:12
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Cache.js:85:5
    at Hook.eval [as callAsync] (eval at create (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.get (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Cache.js:70:18)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compilation.js:2277:18
    at arrayEach (/Users/7rulnik/projects/alfabank/assr/node_modules/neo-async/async.js:2405:9)
    at Object.each (/Users/7rulnik/projects/alfabank/assr/node_modules/neo-async/async.js:2846:9)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compilation.js:2270:14
    at symbolEach (/Users/7rulnik/projects/alfabank/assr/node_modules/neo-async/async.js:2444:9)
    at Object.each (/Users/7rulnik/projects/alfabank/assr/node_modules/neo-async/async.js:2849:16)
    at Compilation.createChunkAssets (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compilation.js:2248:12)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compilation.js:1539:10
    at Hook.eval [as callAsync] (eval at create (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compilation.seal (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compilation.js:1433:27)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compiler.js:770:19
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compilation.js:1357:4
    at _next1 (eval at create (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:21:1)
    at eval (eval at create (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/7rulnik/projects/alfabank/assr/node_modules/neo-async/async.js:2850:39)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:216:18
    at /Users/7rulnik/projects/alfabank/assr/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/7rulnik/projects/alfabank/assr/node_modules/neo-async/async.js:2850:39)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:40:16
    at Hook.eval [as callAsync] (eval at create (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:38:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compilation.finish (/Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compilation.js:1328:28)
    at /Users/7rulnik/projects/alfabank/assr/node_modules/webpack/lib/Compiler.js:765:18
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
/Users/7rulnik/projects/alfabank/assr/node_modules/.bin/webpack process exited with code 1

Without splitChunks build works as expected

 optimization: {
    chunkIds: 'named',
}

what about options like a --mode production, --env.file and etc. Is that dep?

This is currently unhandled. We need to find a solution for this in the CLI.

Could you explain me another way, add full path to config prod/dev and about env.file ...?

For example:

Build client

./node_modules/webpack/bin/webpack.js --mode production --env.file=production --env.folder=$BUILD_FOLDER

Build server

./node_modules/webpack/bin/webpack.js --env.file=ssr.production --env.folder=$BUILD_FOLDER

@thasmo

Where do these numbers come from; has this been tested or something? Thanks!

@thasmo It's an estimated guess. Probably depends on the application.

maxInitialRequests: 30, maxAsyncRequests: 30

These are pretty high limits. I think no normal application will run into these limits at all. I uses 30 instead of Infinity to have some kind of parachute for extreme edgecases. (Infinity has a little performance benefit, so that's probably also fine if you are not at these edgecases)

maxSize: 100_000

The minSize defaults to 30kb. With this config chunks will be between 30kb and 100kb. The algorithm work the way that chunks bigger than maxSize are split into two parts. The splitting point is chosen in a deterministic way based on module names. The split point can't be in the first 30kb and can't be in the last 30kb, so it has about 40kb to move. Smaller maxSizes give it less room to move, which makes it less deterministic, which hurts long term caching. Bigger maxSize makes the chunks bigger, which hurts long term caching. Difficult to find a perfect value, depends on the app and which changes you do. As a rule of thumb I thought maxSize = 3 * minSize could be a good idea.

If someone want to do deeper investigations here, that would be interesting.

@7rulnik

Multiple chunks emit assets to the same filename server.js

@7rulnik Did you set output.filename: "server.js" or used the default output.filename: "[name].js"

@sokra

@sokra Thanks a lot for the explanation.

@sokra

@sokra yep, it was server.js and entry was server.
I tried [name].js — now it works. Is it the recommended approach?

@TchernyavskyDaniil

Could you explain me another way, add full path to config prod/dev and about env.file ...?

@TchernyavskyDaniil I'm not sure if I understood the question correctly. Was this related to Persistent Caching?

@vankop

@vankop okay, #11398

We are hoping to have a major release of our software (JupyterLab) in the next month, and we've rewritten key parts to depend on webpack 5 and its module federation system. It works great and we love it! Thanks!

A while ago, you were hoping to release webpack 5 this summer, which worked well for our timeline, but I understand things can shift. To better plan our release, do you have an idea of when webpack 5 might be released, or at least move to releasing RCs?

Yes actually we are moving to the next stage.

-> #11406 <-

Thanks to all of you for helping to beta test webpack 5.

I'll close this issue now. Please create new issues for problems now. I hope I didn't miss any problems posted here, but there are ~500 comments in this issue now and github isn't the best tool to manage issues with that many comments. So if we missed something, please create a new issue.

Thanks for the great work!

I'm not sure if this mounts as an issue but I remember the folks on HTTP 203 podcast mentioning that webpack5 will not have the same lib in multiple chunks.

But I'm seeing leaflet in a few of them (screenshot).

I'm lazyloading those components, so could that be it? Am I doing something wrong?

@mustafawm In this case it should indeed do that. Do you have any special optimization configuration?

@sokra

In this case it should indeed do that.

Hi @sokra do you mean because I'm lazy loading them? So if I don't lazy load them, there will be on leaflet in main.js

Here is the optimization that I've got

optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        extractComments: false,
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },

hmm not sure, it looks like disables optimization.splitChunks, neither the vendor splitting nor the duplication splitting is working.

Could you create an issue with a repro?

@sokra

thansk @sokra, I did. issue, repo

I couldn't create a new codebase with the issue, so I had to strip out unrelated parts from the one i'm working on. It only contains the <Map /> component now. Hopefully it's clear enough

@sokra

Hi @sokra,

I am using webpack 5.0.0-rc.0 with module federation for a new application and facing an issue with the node process variable. The dependent node module is not able to receive the global node process variable. I am getting the error message ' process is not defined'.

I have resolved the issue with process.platform and process.browser by using webpack.DefinePlugin as below.

new webpack.DefinePlugin({
'process.platform': JSON.stringify(process.platform),
'process.browser': JSON.stringify(process.browser),
}),

This resolved the issue with process.platform and process.browser but now I am facing the issue with process.cwd() for which the fixes are not working. I have tried the fixes mentioned below but didn't work. Please help.

new webpack.DefinePlugin({
'process.platform': JSON.stringify(process.platform),
'process.browser': JSON.stringify(process.browser),
'process.cwd': JSON.stringify(process.cwd),
}),

new webpack.DefinePlugin({
'process.platform': JSON.stringify(process.platform),
'process.browser': JSON.stringify(process.browser),
'process.cwd': () => {
process.cwd();
},
}),

This issue doesn't exist in webpack 4 but I have to use webpack 5 for module federation.
Kindly help me to resolve this issue .

Regards,
Raj

Please use process.platform, not const { platform } = process;, we will improve it in future

@evilebottnawi

Please use process.platform, not const { platform } = process;, we will improve it in future

Hi @evilebottnawi , @sokra

Thanks for the response.

I have a different scenario. I am using @apidevtools/json-schema-ref-parser which internally uses Node built-ins like process.platform, process.browser and the function process.cwd()

By default, Webpack 5 does not make these built-in nodes available to @apidevtools/json-schema-ref-parser, and therefore a "process is not defined" error is displayed. Is there anyway I can expose these node builts for my dependencies using Webpack 5 or any plugins?
Webpack 4 did not have these problems as these built-in nodes were available by default.

Regards,
Raj

Please look at the migration guide, you need polyfill it

Hi, I'm facing the exact problem with respect to migrating from v4. Do you have a guide or reference for the polyfill that we can follow? Thanks.

Navigation Menu

Repository navigation

webpack 5 beta feedback #9802

Build client

Build server

484 remaining items

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

webpack 5 beta feedback #9802

Description

Activity

miraage commented on Oct 11, 2019

Andarist commented on Oct 11, 2019

sokra commented on Oct 11, 2019

thasmo commented on Oct 11, 2019

TchernyavskyDaniil commented on Oct 11, 2019

sokra commented on Oct 11, 2019

7rulnik commented on Oct 11, 2019

TchernyavskyDaniil commented on Oct 11, 2019

Build client

Build server

sokra commented on Oct 11, 2019

sokra commented on Oct 11, 2019

thasmo commented on Oct 11, 2019

7rulnik commented on Oct 11, 2019

sokra commented on Oct 11, 2019

484 remaining items

ntucker commented on Aug 30, 2020

jasongrout commented on Sep 1, 2020

sokra commented on Sep 1, 2020

mwmcode commented on Sep 21, 2020

sokra commented on Sep 21, 2020

mwmcode commented on Sep 21, 2020

sokra commented on Sep 21, 2020

mwmcode commented on Sep 22, 2020

isachinraj commented on Oct 7, 2020

alexander-akait commented on Oct 7, 2020

isachinraj commented on Oct 7, 2020

alexander-akait commented on Oct 7, 2020

iwangotamarjo commented on Oct 22, 2020

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions