rspack
rspack copied to clipboard
[Bug]: webpack插件在rspack下引用,无法改变chunk的依赖关系,在webpack下可以
System Info
System: OS: macOS 13.3.1 CPU: 2.5 GHz Intel Core i7 Memory: 16 GB 2133 MHz LPDDR3 Browsers: Chrome: 120.0.6099.109 npmPackages: "@rsbuild/core": "^0.4.0", "@rsbuild/plugin-vue2": "^0.4.0",
Details
有个需求是css文件过大需要拆分,原项目里使用的是css-split-webpack-plugin这个插件,这个插件给出的方法是支持webpack5, 我使用插件给的办法在webpack5中做了尝试也是可以正常打包的,
而且css文件的引入也是正常的
上面两个css引用在是他拆分后打包的结果
然后我在rsbuild构建的项目下也引用了这个插件
这是我的配置,文件可以看到是打包出来了,但是并没有被引用
插件中修改文件的方式
使用的钩子
processAssets
Reproduce link
NONE
Reproduce Steps
npm run build
@wengjiacheng 我不知道这个plugin发生了什么,但我自己写了一个css split插件 https://github.com/summer-boythink/split-css-rspack-plugin
虽然目前支持的功能还不多,但您可以试一试
@wengjiacheng 我不知道这个plugin发生了什么,但我自己写了一个css split插件 https://github.com/summer-boythink/split-css-rspack-plugin
虽然目前支持的功能还不多,但您可以试一试
summer-boythink IE11对单个css文件有大小限制,单个css文件样式不能超过4096个,超过会自动截取,css-split-webpack-plugin可以对css文件大小限制,进行裁切,但是库本身只支持webpack4,之后就没有维护,在这个库的issue中有人给出了支持webpack5的方案,我在本地webpack5中尝试了,可以正常打包,裁切css,并且打包后chunk的依赖关系有没有变化。 然后就放在了rspack下进行尝试,可以打包出文件,但是没法影响chunk的依赖关系,打包出来的css文件插入不到需要的chunk中
summer-boythink IE11对单个css文件有大小限制,单个css文件样式不能超过4096个,超过会自动截取,css-split-webpack-plugin可以对css文件大小限制,进行裁切,但是库本身只支持webpack4,之后就没有维护,在这个库的issue中有人给出了支持webpack5的方案,我在本地webpack5中尝试了,可以正常打包,裁切css,并且打包后chunk的依赖关系有没有变化。 然后就放在了rspack下进行尝试,可以打包出文件,但是没法影响chunk的依赖关系,打包出来的css文件插入不到需要的chunk中
Hello @wengjiacheng, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.
Hello @wengjiacheng, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.
chunk in readonly in rspack. We will improve the documentation. Thanks for the heads-up.
chunk in readonly in rspack. We will improve the documentation. Thanks for the heads-up.
chunkin readonly in rspack. We will improve the documentation. Thanks for the heads-up.
chunkin readonly in rspack. We will improve the documentation. Thanks for the heads-up.
https://github.com/wengjiacheng/rspack-repro 这是构建项目,webpack下可以拆分css, rspack下打包没有效果
@xc2 请问这个问题有进展吗,有计划大概什么时候会解决吗?
@h-a-n-a could you pls tell if mutation support for chunk.files is planned
@h-a-n-a could you pls tell if mutation support for chunk.files is planned
This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
It's not planned to access internal structs like Chunk, ModuleGraph, etc on the JS side.
I'm trying to use this plugin: https://github.com/privatenumber/webpack-localize-assets-plugin , among other issues the one that seems more complex to solve is related to these lines:
for (const newAssetName of newAssetNames) {
chunk.files.add(newAssetName);
}
Which is updating the files for a chunk.
Example Let's have a simple chunk with just one asset:
{
id: '123',
files: [ '123.[locale]-7bfd62f8b95f7904.mjs' ]
}
Suppose we have locales for es, en, ja . After that function we might have something like:
{
id: '123',
files: [
'123.en-332d176a9fbf2c40.mjs',
'123.es-a59bd56cdc4bbfe9.mjs',
'123.ja-a59bd56cdc4bbfe9.mjs',
]
}
So any other plugin that uses chunk.files or chunkgraph.getFiles() would use the translated assets.
Now, related to rspack and its inability to update chunk.files on the rust side, currently I can't use the rspack_plugin_banner or rspack_plugin_devtool for example because the use of chunk.files (here, and here).
Also, I've notice that we deal with chunk.files when we rename_asset or delete_asset (here) , but nothing when we emit_asset . Can we add an option to add chunk information when we emit an asset, (I mean. away to add assets to chunk.files)? Or do you think in other approach to solve this issue? Thanks is advance for any help on this matter.
@inottn do you have any insights on this matter? My apologies for tagging you.
I'm trying to use this plugin: https://github.com/privatenumber/webpack-localize-assets-plugin , among other issues the one that seems more complex to solve is related to these lines:
for (const newAssetName of newAssetNames) {
chunk.files.add(newAssetName);
}
Which is updating the files for a chunk.
Example Let's have a simple chunk with just one asset:
{
id: '123',
files: [ '123.[locale]-7bfd62f8b95f7904.mjs' ]
}
Suppose we have locales for es, en, ja . After that function we might have something like:
{
id: '123',
files: [
'123.en-332d176a9fbf2c40.mjs',
'123.es-a59bd56cdc4bbfe9.mjs',
'123.ja-a59bd56cdc4bbfe9.mjs',
]
}
So any other plugin that uses chunk.files or chunkgraph.getFiles() would use the translated assets.
Now, related to rspack and its inability to update chunk.files on the rust side, currently I can't use the rspack_plugin_banner or rspack_plugin_devtool for example because the use of chunk.files (here, and here).
Also, I've notice that we deal with chunk.files when we rename_asset or delete_asset (here) , but nothing when we emit_asset . Can we add an option to add chunk information when we emit an asset, (I mean. away to add assets to chunk.files)? Or do you think in other approach to solve this issue? Thanks is advance for any help on this matter.
@inottn do you have any insights on this matter? My apologies for tagging you.