从Webpack中的捆绑包中排除一部分

编程问答 2022-06-05

问题描述

我有一个入口点：

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包装。我有几个问题：

  1. 我想为每个应用分别提取css（例如chat-corner-toggler-app.css和chat-corner-pager-app.css）。
  2. 从主捆绑包中排除这些css块
  3. 以某种方式将这些块添加到iframe中

我尝试使用splitChunks完成第一点并取得了一些成功，但是主捆绑包确实导入了该块。它不需要我，因为我想在iframe中手动将其导入。从webpack配置：

  optimization: {
    splitChunks: {
      cacheGroups: {
        style: {
          name: 'toggler',test: /Toggler\/index\.scss$/,chunks: 'all',enforce: true
        },}
    }
  },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-modulesreactjsreactjsreactjsreactjswebpackwebpackwebpack