Vue-cli: How to use splitChunks webpack system with vue cli 3?

[isaumya]

Hi,
I wanna use the splitChunk option of webpack. I've created the vie.config.js file and put the following in there:

module.exports = {
  configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.splitChunks = {
                cacheGroups: {
                    node_vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        chunks: "all",
                        priority: 1
                    }
                }
            }
        }
  }
}

But when I build my app, nothing gets changed. I've also posted in stackoverflow: https://stackoverflow.com/questions/51816020/how-to-break-the-js-files-into-chunks-in-vue-cli-3-with-webpack-performance-obje/
Did not get any help from there as well. Can anyone please reply?

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[KuzMaxOriginal]

@isaumya You should use config.optimization.splitChunks, as mentioned here: https://github.com/neutrinojs/webpack-chain#configuring-optimizations-shorthand-methods

[isaumya]

Hi all, I'm using the following code inside vue.config.js file and it is working, So, I'm sharing my code here:

module.exports = {
  configureWebpack:{
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 200000,
      }
    }
  }
}

Hope this helps.

[KuzMaxOriginal]

@isaumya I don't want to bother you, but I feel a strong urge to explain you that in your first piece of code, you absolute ignore the webpack chained system. I see you mixed up configureWebpack and chainWebpack properties. That's why it doesn't work.

Basically, if you use the first option, you pass an object with properties you want to configure. Just like you did in your last response.

If you want to pass function, you should use the second option, and instead of writing configuration properties, you use special functions documented in webpack-chain.