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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: webpack插件在rspack下引用,无法改变chunk的依赖关系,在webpack下可以 #5631

Closed
wengjiacheng opened this issue Feb 7, 2024 · 11 comments
Assignees
Labels
bug Something isn't working
Milestone

Comments

@wengjiacheng
Copy link

wengjiacheng commented Feb 7, 2024

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文件的引入也是正常的
image
上面两个css引用在是他拆分后打包的结果

然后我在rsbuild构建的项目下也引用了这个插件
image
这是我的配置,文件可以看到是打包出来了,但是并没有被引用
image
插件中修改文件的方式
image
使用的钩子
processAssets

Reproduce link

NONE

Reproduce Steps

npm run build

@wengjiacheng wengjiacheng added bug Something isn't working pending triage The issue/PR is currently untouched. labels Feb 7, 2024
@summer-boythink
Copy link

@wengjiacheng 我不知道这个plugin发生了什么,但我自己写了一个css split插件
https://github.com/summer-boythink/split-css-rspack-plugin

虽然目前支持的功能还不多,但您可以试一试

@wengjiacheng
Copy link
Author

summer-boythink
IE11对单个css文件有大小限制,单个css文件样式不能超过4096个,超过会自动截取,css-split-webpack-plugin可以对css文件大小限制,进行裁切,但是库本身只支持webpack4,之后就没有维护,在这个库的issue中有人给出了支持webpack5的方案,我在本地webpack5中尝试了,可以正常打包,裁切css,并且打包后chunk的依赖关系有没有变化。
然后就放在了rspack下进行尝试,可以打包出文件,但是没法影响chunk的依赖关系,打包出来的css文件插入不到需要的chunk中

@jerrykingxyz jerrykingxyz removed the pending triage The issue/PR is currently untouched. label Feb 19, 2024
Copy link
Contributor

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.

@h-a-n-a
Copy link
Contributor

h-a-n-a commented Feb 19, 2024

chunk in readonly in rspack. We will improve the documentation. Thanks for the heads-up.

@wengjiacheng
Copy link
Author

chunk in readonly in rspack. We will improve the documentation. Thanks for the heads-up.

@wengjiacheng
Copy link
Author

https://github.com/wengjiacheng/rspack-repro
这是构建项目,webpack下可以拆分css,
rspack下打包没有效果

@wengjiacheng
Copy link
Author

@xc2 请问这个问题有进展吗,有计划大概什么时候会解决吗?

@xc2
Copy link
Collaborator

xc2 commented Mar 4, 2024

@h-a-n-a could you pls tell if mutation support for chunk.files is planned

Copy link

stale bot commented May 3, 2024

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!

@stale stale bot added the stale label May 3, 2024
@stale stale bot removed the stale label Aug 13, 2024
@hardfist hardfist added this to the 1.0.0 milestone Aug 13, 2024
@h-a-n-a
Copy link
Contributor

h-a-n-a commented Aug 13, 2024

It's not planned to access internal structs like Chunk, ModuleGraph, etc on the JS side.

@h-a-n-a h-a-n-a closed this as not planned Won't fix, can't repro, duplicate, stale Aug 13, 2024
@Pablinho
Copy link

Pablinho commented Oct 17, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants