webpack 5 beta feedback #9802
Comments
Many thanks for that from my side. I can not understand how people could write frontend code without realizing what dependencies they actually use.. |
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 |
You can request that for webpack-cli, which can set |
|
Diving into updating our webpack-based tool and I read about setting these for HTTP2: |
|
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 and got this error: Without |
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 It's an estimated guess. Probably depends on the application.
These are pretty high limits. I think no normal application will run into these limits at all. I uses
The minSize defaults to 30kb. With this config chunks will be between 30kb and 100kb. The algorithm work the way that chunks bigger than If someone want to do deeper investigations here, that would be interesting. |
@7rulnik Did you set |
|
@sokra Thanks a lot for the explanation. |
|
@sokra yep, it was |
@TchernyavskyDaniil I'm not sure if I understood the question correctly. Was this related to Persistent Caching? |
@7rulnik When chunks are splitted (or multiple entrypoints are used) |
|
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? |
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 |
No, only files:
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 |
|
@sokra also build time increased by ~25%. I can provide the graphs from ProfilingPlugin. Should I? |
@7rulnik yep. Could you create a new issue with your case + config? |
|
Noticed when using 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. |
|
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? |
|
Also encountering an issue described in webpack-contrib/stylelint-webpack-plugin#187. |
|
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 |
|
About persistent caching; can it be used in |
|
Does the new webpack 5 optimization setting |
|
@jasongrout yes. There is also
|
|
@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) |
|
@artem-malko No, |
|
@evilebottnawi sor, I mean optimization.moduleIds: 'hashed' |
|
@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. |
|
@artem-malko oh, yes, but you can still use it for v5, why do not migrate on |
|
@evilebottnawi as I said before #9802 (comment) cause of the researches of @sokra |
|
@artem-malko This has been improved since then. |
|
When using a function for config like module.exports = (env, argv) => {
return {}; // this is the config
}the function isn't even run. |
|
@ntucker could you create a separate issue with repro please? |
|
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 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 |
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 Here is the optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
extractComments: false,
terserOptions: {
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({}),
],
}, |
|
hmm not sure, it looks like disables Could you create an issue with a repro? |
|
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({ 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({ new webpack.DefinePlugin({ This issue doesn't exist in webpack 4 but I have to use webpack 5 for module federation. Regards, |
|
Please use |
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? Regards, |
|
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. |
and others
🎉 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:
We want to reach these goals after the beta phase:
To help with testing you can do the following:
assetmodule typenode --trace-deprecationKnown problems:
eval()causes problems with theoptimization.innerGraph(production).libraryTarget: "module"is not implemented yetdevtools don't support persistent caching yetimport.metais still missingstack trace is incorrectly displayed in statslintDirtyModulesOnlyand webpack 5.beta0 webpack-contrib/stylelint-webpack-plugin#187Planned breaking changes:
devtool options will be more restrictiveDisable some webpack-only syntax by default:require.ensure,require.includecache.store != "pack" will be removedThe text was updated successfully, but these errors were encountered: