Изменить точку входа в веб-пакете

Question

Я пытался создать отдельные чанки для компонентов в веб-пакете.

Мой входной веб-пакет выглядит так:

entry: [
  './src/components/home/hero/hero.js',
  './src/components/home/hero/hero.css',
  './src/components/layout/navbar.js',
  './src/components/layout/css/navbar.css',
  isEnvDevelopment &&
    require.resolve('react-dev-utils/webpackHotDevClient'),
  // Finally, this is your app's code:
  paths.appIndexJs,
  // We include the app code last so that if there is a runtime error during
  // initialization, it doesn't blow up the WebpackDevServer client, and
  // changing JS code would still trigger a refresh.
].filter(Boolean),
//...
splitChunks: {
      chunks: "all",
      minSize: 0
},
//...

, а когда я собираюсь, еще одна сборка. js создан name vendor ... et c и все в порядке, но другой css chunck не создан.

У меня есть наблюдали, что делают это:

entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        utilities: {
          test: /[\\/]src[\\/]utilities[\\/]/,
          minSize: 0
        }
      }
    }
  }

будет работать, но моя запись является картой, и я не могу добавить как массив. Я пытаюсь изменить карту для массива, но веб-пакету нужна предыдущая конфигурация для построения проекта.

Как я могу реализовать это с моей конфигурацией входа? или существует другой способ сделать это?

Спасибо за вашу поддержку.

РЕДАКТИРОВАТЬ:

Наконец, я считаю, что я могу отделить карту, как это:

entry: {
 hero: './src/components/home/hero/hero.js',
 navbar: './src/components/layout/navbar.js'
}
[
  isEnvDevelopment &&
  require.resolve('react-dev-utils/webpackHotDevClient'),
  paths.appIndexJs
],
output:{
//..
}
//..

Но теперь с записью я все еще не получаю отдельные css и js для этих компонентов.

Решение

Наконец-то. В этом стеке ссылка показывает, как отделить css, а код такой:

optimization: {
//..
       splitChunks: {
        cacheGroups: {
          hero: {
            name: 'hero',
            test: /hero\.css$/,
            chunks: 'all',
            enforce: true
          },
          navbar: {
            name: 'navbar',
            test: /navbar\.css$/,
            chunks: 'all',
            enforce: true
          }
        }
},
//...
plugins: [
      //...
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: 'chunk-[id].css',
      })
      //...
]

и создать css (это имена чанков). Но как заменить css, который я создал, на css, который реагирует на создание?