Как разделить css на бандлы в webpack?

Question

[Данил Чекалин]

Кейс не стандартный. Это React приложение с css-modules (scss). Мое приложение имеет несколько React приложений.

const togglerRoot = root.querySelector(`#${TOGGLER_PSELECTOR}`)
const pagerRoot = root.querySelector(`#${PAGER_PSELECTOR}`)
render(<ChatCornerTogglerApplication />, togglerRoot)
render(<ChatCornerPagerApplication />, pagerRoot)

Каждое приложение внутри обернуто в iframe, пример:

const ChatCornerTogglerApplication: React.FC = () => {
  // ...
  return (
    <VendorFrame name="toggler" scrolling="no" style={style}>
      <Toggler shape={shape} text={text} style={{ backgroundColor: mainColor }} onClick={toggleCornerMode} />
    </VendorFrame>
  )
}

И внутри каждого приложения своя цепочка компонентов, и каждый имеет свои стили. Как например компоннет Toggler.
Тут получается сразу несколько задач:
1. Нужно, чтобы каждая цепочка компонентов собирала свой банд стилей в отдельный файл, чтобы были chat-corner-toggler-app.css и chat-corner-pager-app.css
2. Приложение не импортировала эти стили напрямую (стандартное поведение)
3. Как-то подгружать в iframe's эти бандлы.

Хотя бы 1 пункт решить

Answer 1

[krundetz]

css в отдельные файлы можно собрать через style-loader, а сохранить их в виде файлов через file-loader для webpack

вам надо изменить свой webpack.conf.js

Примерно так

Comments

[Данил Чекалин]

Мне кажется вы дали совет совсем вырезано из контекста. Объясни плз как мне style-loader поможет с целыми деревьями компонентов? И file-loader поможет исключить сам chunk из бандла общего (проблема 2)

[krundetz]

пути к стилям
/path/to/bandle1/css/style1.css
/path/to/bandle1/css/style2.css
/path/to/bandle2/css/style3.css
/path/to/bandle2/css/style4.css

module.exports = {
    entry: {
        bundle1: './src/bundle1/bundle1.js',
        bundle2: './src/bundle2/bundle2.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /bandle1\/.*\.(sa|sc|c)ss$/i,
                use: [
                    { loader: 'style-loader', options: { injectType: 'linkTag' } }
                    'css-loader',
                    {
                        loader: 'file-loader',
                            options: {
                                outputPath: './bundle1/css',
                                publicPath: '/bundle1/css',
                                name: '[name],css',
                            }
                      },
                ],
            },
           {
                test: /bandle2\/.*\.(sa|sc|c)ss$/i,
                use: [
                    { loader: 'style-loader', options: { injectType: 'linkTag' } }
                    'css-loader',
                    {
                        loader: 'file-loader',
                            options: {
                                outputPath: './bundle2/css',
                                publicPath: '/bundle2/css',
                                name: '[name],css',
                            }
                      },
                ],
            },
        ]
    }
}

я себе это вижу как то так

[Данил Чекалин]

Я написал сверху, что у меня css modules, то есть каждый компонент работает со своим файлом стилей

[krundetz]

То есть у тебя примерно такая структура:

/path/to/bandle1/css/style_component1.css
/path/to/bandle1/css/style_component2.css
/path/to/bandle2/css/style_component3.css
/path/to/bandle2/css/style_component4.css

А на выходе ты хочешь

/dist/style_bundle1.css (объеденит style_component1.css и style_component2.css)
/dist/style_bundle2.css (объеденит style_component3.css и style_component4.css)

так?

[krundetz]

У тебя точка входа одна?

[Данил Чекалин]

krundetz, да entry одна. По поводу структуры отвечу уже завтра. Спасибо!