1

I've been tryng how to create separate chunks for components in webpack.

My entry webpack see like this:

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
},
//...

and when i build, another build.js is created name vendor...etc and it's ok, but another css chunck is not created.

After build

I've been watched that do this:

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
        }
      }
    }
  }

would work but my entry is a map and i can't add like array. I've trying change the map for array but the webpack need the previous configuration to build the project.

How i can implemet this with my entry configuration? or exists other way to do this?

Thaks you for your support.

EDIT:

Finally i believe that i can separate the map like this: 

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

But now with entry, i still don't get separate css and js for this components.

Solution

Finally. In this stackoverflow link show how to separate css and the code is this:

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 chunks

and create the css (are the chunk names). But how do I replace the css that I created with the css that react create?

Ruben Valdivia Perez
  • 326
  • 1
  • 4
  • 14
  • this will help you https://webpack.js.org/guides/code-splitting/ – Ericgit Apr 11 '20 at 03:57
  • Thanks for your answer but, i haven't been found information about that, my entry point is a map and i don´t know how to apply configuration, i have been traying use {} inside but console says entry[0] must be a string. I don't have experience with webpack and i've been reading the parts of entry and splitChunks but i haven´t been found how to edit a entry in a map. – Ruben Valdivia Perez Apr 11 '20 at 21:58
  • @BloodyLogic I update the question, change the entry point, not working or i don't know if i doing the correct way with the method that i founded. – Ruben Valdivia Perez Apr 12 '20 at 02:18
  • 1
    https://stackoverflow.com/questions/35322958/can-i-use-webpack-to-generate-css-and-js-separately This question has been asked click on the link! – Ericgit Apr 12 '20 at 04:08

0 Answers0