Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack 5 beta feedback #9802

Closed
sokra opened this issue Oct 11, 2019 · 507 comments
Closed

webpack 5 beta feedback #9802

sokra opened this issue Oct 11, 2019 · 507 comments

Comments

@sokra
Copy link
Member

@sokra sokra commented Oct 11, 2019

馃帀 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:

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
@sokra sokra pinned this issue Oct 11, 2019
@sokra sokra mentioned this issue Oct 11, 2019
19 tasks
@miraage
Copy link

@miraage miraage commented Oct 11, 2019

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

@Andarist
Copy link

@Andarist Andarist commented Oct 11, 2019

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

@sokra
Copy link
Member Author

@sokra sokra commented Oct 11, 2019

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

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

@thasmo
Copy link

@thasmo thasmo commented Oct 11, 2019

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!

@TchernyavskyDaniil
Copy link

@TchernyavskyDaniil TchernyavskyDaniil commented Oct 11, 2019

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

@sokra
Copy link
Member Author

@sokra sokra commented Oct 11, 2019

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.

@7rulnik
Copy link
Contributor

@7rulnik 7rulnik commented Oct 11, 2019

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',
}

@TchernyavskyDaniil
Copy link

@TchernyavskyDaniil TchernyavskyDaniil commented Oct 11, 2019

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

@sokra
Copy link
Member Author

@sokra sokra commented Oct 11, 2019

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.

@sokra
Copy link
Member Author

@sokra sokra commented Oct 11, 2019

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"

@thasmo
Copy link

@thasmo thasmo commented Oct 11, 2019

@sokra Thanks a lot for the explanation.

@7rulnik
Copy link
Contributor

@7rulnik 7rulnik commented Oct 11, 2019

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

@sokra
Copy link
Member Author

@sokra sokra commented Oct 11, 2019

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?

@sokra
Copy link
Member Author

@sokra sokra commented Oct 11, 2019

I tried [name].js 鈥 now it works. Is it the recommended approach?

@7rulnik When chunks are splitted (or multiple entrypoints are used) output.filename affects multiple chunk. You can give multiple chunks the same filename. A constant output.filename won't work in these cases.

@thasmo
Copy link

@thasmo thasmo commented Oct 11, 2019

About the persistent cache configuration; how would it look like if I add custom/other files?

cache: {
  // 1. Set cache type to filesystem
  type: "filesystem",
  
  buildDependencies: {
    // 2. Add your config as buildDependency to get cache invalidation on config change
    config: [__filename],
  
    // 3. If you have other things the build depends on you can add them here
    // Note that webpack, loaders and all modules referenced from your config are automatically added
    anyKeyHere: ['/absolute/path/'], // ?
  }
}

Would it take a regex/glob too?

In that sense; is there documentation for v5 already somewhere?

@TchernyavskyDaniil
Copy link

@TchernyavskyDaniil TchernyavskyDaniil commented Oct 11, 2019

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?

Just a another way to build like that :)

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

@sokra
Copy link
Member Author

@sokra sokra commented Oct 11, 2019

Would it take a regex/glob too?

No, only files: something, or folders: something/. It will be resolved so it could be a node_modules or file without extension.

In that sense; is there documentation for v5 already somewhere?

Not that much. The Changelog has much info. There is a work in progress branch here: https://github.com/webpack/webpack.js.org/tree/next

@7rulnik
Copy link
Contributor

@7rulnik 7rulnik commented Oct 11, 2019

@sokra also build time increased by ~25%. I can provide the graphs from ProfilingPlugin. Should I?

@sokra
Copy link
Member Author

@sokra sokra commented Oct 11, 2019

Should I?

@7rulnik yep. Could you create a new issue with your case + config?

@thasmo
Copy link

@thasmo thasmo commented Oct 11, 2019

Noticed when using eslint-loader it prints this to the terminal:

  assets\base\scripts\application\components\component.ts:14:18
  鈥   5:24  Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
  鈥   6:27  Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
  鈥   7:25  Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
  鈥  16:47  Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any
  脳  14:18  Unexpected empty method run.               @typescript-eslint/no-empty-function

  4 warnings
  1 error

    at emitError (C:\Users\user\Projects\project\node_modules\webpack\lib\NormalModule.js:273:6)
    at Linter.printOutput (C:\Users\user\Projects\project\node_modules\eslint-loader\dist\Linter.js:95:5)
    at cache (C:\Users\user\Projects\project\node_modules\eslint-loader\dist\cacheLoader.js:46:14)
    at C:\Users\user\Projects\project\node_modules\loader-fs-cache\index.js:122:24
    at Gunzip.cb (C:\Users\user\Projects\project\node_modules\loader-fs-cache\index.js:47:14)
    at Gunzip.zlibBufferOnEnd (zlib.js:131:10)
    at Gunzip.emit (events.js:203:15)
    at Gunzip.EventEmitter.emit (domain.js:448:20)
    at endReadableNT (_stream_readable.js:1145:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

Any idea why the stack is printed as well? The call stack should not be printed actually, I guess - only the linting errors should be printed.

@7rulnik
Copy link
Contributor

@7rulnik 7rulnik commented Oct 11, 2019

@sokra issue about build time #9807

@thasmo
Copy link

@thasmo thasmo commented Oct 12, 2019

Got lots of these logs on the console when using the new filesystem caching:

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for /module/C:\Users\thasmo\Projects\project\node_modules\mini-css-extract-plugin\dist\loader.js!C:\Users\thasmo\Projects\project\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[0].use[1]!C:\Users\thasmo\Projects\project\node_modules\postcss-loader\src\index.js??ruleSet[1].rules[0].use[2]!C:\Users\thasmo\Projects\project\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[0].use[3]!C:\Users\thasmo\Projects\project\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[0].use[4]!C:\Users\thasmo\Projects\project\assets\components\sitemap\styles\base.scss: Error: No serializer registered for CssDependency
<w> We will try to cache this entry again once in a while or when the cache file is deleted.

What do they mean; can I fix/disable them?

@thasmo
Copy link

@thasmo thasmo commented Oct 12, 2019

Also encountering an issue described in webpack-contrib/stylelint-webpack-plugin#187.

@dreyks
Copy link

@dreyks dreyks commented Oct 12, 2019

Tried caching option and looks like it works only every other time. Continuously running the build without changing anything: one build is cached another one is not

@thasmo
Copy link

@thasmo thasmo commented Oct 13, 2019

About persistent caching; can it be used in production and development mode and even with watch, or are there limitations? If not, I'm looking forward enabling it in general.

@jasongrout
Copy link
Contributor

@jasongrout jasongrout commented Aug 26, 2020

Does the new webpack 5 optimization setting moduleIds: 'deterministic' effectively replace using the HashedModuleIdsPlugin plugin? It seems that they are both deterministically setting the module ids, but I'm not sure if there is other context to what these are doing that I'm missing. Thanks!

@sokra
Copy link
Member Author

@sokra sokra commented Aug 27, 2020

@jasongrout yes. There is also chunkIds: "deterministic" and mangleExports: "deterministic". All these are enabled by default in production mode, so you can omit the options from configuration.

"size" is an alternative value, which choose shortest ids/names possible.

@artem-malko
Copy link

@artem-malko artem-malko commented Aug 27, 2020

@sokra Will HashedModuleIdsPlugin be deprecated? As I understand, you thought, that it will be ok to use it in webpack 5. There is a link to discussion: #9802 (comment)

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Aug 27, 2020

@artem-malko No, HashedModuleIdsPlugin is not deprecated

@artem-malko
Copy link

@artem-malko artem-malko commented Aug 27, 2020

@evilebottnawi sor, I mean optimization.moduleIds: 'hashed'

@artem-malko
Copy link

@artem-malko artem-malko commented Aug 27, 2020

@evilebottnawi hm, I've got this output with webpack v5.0.0-beta.28:

WARNING in configuration
The value 'hashed' for option 'optimization.moduleIds' is deprecated. Use 'deterministic' instead.

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Aug 28, 2020

@artem-malko oh, yes, but you can still use it for v5, why do not migrate on deterministic?

@artem-malko
Copy link

@artem-malko artem-malko commented Aug 28, 2020

@evilebottnawi as I said before #9802 (comment) cause of the researches of @sokra

@sokra
Copy link
Member Author

@sokra sokra commented Aug 29, 2020

@artem-malko This has been improved since then.

@ntucker
Copy link

@ntucker ntucker commented Aug 30, 2020

When using a function for config like

module.exports = (env, argv) => {
  return {}; // this is the config
}

the function isn't even run.

@vankop
Copy link
Member

@vankop vankop commented Aug 30, 2020

@ntucker could you create a separate issue with repro please?

@ntucker
Copy link

@ntucker ntucker commented Aug 30, 2020

@vankop okay, #11398

@jasongrout
Copy link
Contributor

@jasongrout jasongrout commented Sep 1, 2020

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?

@sokra
Copy link
Member Author

@sokra sokra commented Sep 1, 2020

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.

@sokra sokra closed this as completed Sep 1, 2020
@sokra sokra unpinned this issue Sep 1, 2020
@mwmcode
Copy link

@mwmcode mwmcode commented Sep 21, 2020

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?

Screen Shot 2020-09-21 at 7 44 28 pm

@sokra
Copy link
Member Author

@sokra sokra commented Sep 21, 2020

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

@mwmcode
Copy link

@mwmcode mwmcode commented Sep 21, 2020

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({}),
    ],
  },

@sokra
Copy link
Member Author

@sokra sokra commented Sep 21, 2020

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?

@mwmcode
Copy link

@mwmcode mwmcode commented Sep 22, 2020

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

@isachinraj
Copy link

@isachinraj isachinraj commented Oct 7, 2020

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

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Oct 7, 2020

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

@isachinraj
Copy link

@isachinraj isachinraj commented Oct 7, 2020

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

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Oct 7, 2020

Please look at the migration guide, you need polyfill it

@iwangotamarjo
Copy link

@iwangotamarjo iwangotamarjo commented Oct 22, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests