исключить один файл из модуля css и создать ресурс webpack отдельно

Question

У меня уже есть настройка webpack для модулей css, однако мне нужно создать файл для переопределения стиля стороннего производителя. Так что файл CSS должен быть загружен как обычный CSS. Поэтому я исключил этот файл из правила css и создал новое правило для этого файла, как показано ниже

 {
    test: /chat.css/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: path.resolve(root, 'buildTools/webpack'),
          },
        },
      },
    ],
  },
  {
    test: /\.css$/,
    exclude: /chat.css/,
    use: [
      ...(process.env.USE_SSR === 'true'
        ? [MiniCssExtractPlugin.loader]
        : [
            {
              loader: 'cache-loader',
            },
            'style-loader',
          ]),
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: true,
          minimize: true,
          localIdentName: '[folder]--[name]--[local]--[hash:base64:2]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: path.resolve(root, 'buildTools/webpack'),
          },
        },
      },
    ],
  },

Также с помощью плагина

new MiniCssExtractPlugin({
  chunkFilename: '[name]-[chunkhash:6].css',
}),

в html.js у нас уже есть

cssAssets.push(
  <React.Fragment key="styles-fragment">
    <script key="styles-js" defer src={assets.styles.js} crossOrigin="anonymous" />
    {assets.styles.css && <link key="styles-css" href={assets.styles.css} rel="stylesheet" type="text/css" />}
  </React.Fragment>
);

как я могу убедиться, что chat.css сгенерирован и каким будет сгенерированное имя сборщика?

Answer 1

Вы можете использовать mini-css-extract-plugin для генерации отдельного чанка для этого конкретного CSS