如何解决从Webpack中的捆绑包中排除一部分
entry: {
'chat.corner': './src/entities/chat-corner/index.ts'
},
我的index.ts
具有多个React应用程序
const togglerRoot = root.querySelector(`#${TOGGLER_PSELECTOR}`)
const pagerRoot = root.querySelector(`#${PAGER_PSELECTOR}`)
render(<ChatCornerTogglerApplication />,togglerRoot)
render(<ChatCornerPagerApplication />,pagerRoot)
每个React应用都有自己的组件链,例如:
const ChatCornerTogglerApplication: React.FC = () => {
// ...
return (
<vendorFrame name="toggler" scrolling="no" style={style}>
<Toggler shape={shape} text={text} style={{ backgroundColor: mainColor }} onClick={toggleCornerMode} />
</vendorFrame>
)
}
每个组件(例如Toggler及其以下的树)都有自己的样式(CSS模块)。您可以在此处看到iframe
组件。是的,每个应用程序(我的意思是ChatCornerTogglerApplication
,ChatCornerPagerApplication
)都由iframe
包装。我有几个问题:
- 我想为每个应用分别提取css(例如
chat-corner-toggler-app.css
和chat-corner-pager-app.css
)。 - 从主捆绑包中排除这些css块
- 以某种方式将这些块添加到iframe中
我尝试使用splitChunks
完成第一点并取得了一些成功,但是主捆绑包确实导入了该块。它不需要我,因为我想在iframe中手动将其导入。从webpack配置:
optimization: {
splitChunks: {
cacheGroups: {
style: {
name: 'toggler',test: /Toggler\/index\.scss$/,chunks: 'all',enforce: true
},}
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。