Turn off seperate chunks for css , vue cli 3 webpack 4

Question

I am using a project created with the latest version of vue cli 3 . I am using the default config , My router has many dynamically imported routes . Both my css and js are split into multiple chunk while running in production . While the behaviour with js is desirable . My css files are quite small I would like to turn off the chunks for css.

How do I configure webpack to do this via the vue.config.js file . Please help with the exact command as I find the webpack config and chain syntax very confusing .Thanks : )

Etamine

Answer 1

1. Create a file in your root of project vue.config.js

I am using few other options too but your needed one is this.

const path = require('path');

module.exports = {
  lintOnSave: true,
  filenameHashing: false,
  chainWebpack: config => {
    config.optimization.delete('splitChunks')
  }
};

This will delete the chunks created and will let you use only single file of CSS as well as JS.

2. filenameHashing: false this part will remove the hashing on files.
3. config.optimization.delete('splitChunks') this will remove chunks.

More specifically with your requirement.

Use these configurations

module.exports = {
  lintOnSave: true,
  filenameHashing: false,
  configureWebpack: {
    optimization: {
      cacheGroups: {
        default: false,
        // Merge all the CSS into one file
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    }
  }
};

Through this way, your JS code will be split into chunks but CSS File will be merged all in one.

More if you want to configure your JS chunks as well you can use these settings.

module.exports = {
  lintOnSave: true,

  filenameHashing: false,
  configureWebpack:{
    optimization: {
      cacheGroups: {
        default: false,
        // Custom common chunk
        bundle: {
          name: 'commons',
          chunks: 'all',
          minChunks: 3,
          reuseExistingChunk: false,
        },
        // Customer vendor
        vendors: {
          chunks: 'initial',
          name: 'vendors',
          test: 'vendors',
        },
        // Merge all the CSS into one file
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    }
  }
};

Lorilee

I only want to delete split chunks for css while retaining the same for js – Etamine

updating answer please wait – Lorilee

@JunaidFarooq it appears that your awesome answer worked well for Webpack 3 but is no longer compatible with Webpack 4.. cacheGroups is no longer a valid configuration object. Is there any chance you could post a Webpack 4 equivalent? – Nadeau

Yeah sure why not I will look into it later at night. if that okay with you? – Lorilee

With WebPack 4, you have to move cacheGroups inside a splitChunks object. That's a valid configuration but it doesn't seem to work. – Lattimore

Answer 2

For Webpack 4, you can see this example (vue.config.js):

const WebpackBundleAnalyzer= require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  filenameHashing:false,
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
       symlinks: false
    },
    optimization: {
      splitChunks: {
       cacheGroups: {
          app: {
            chunks: 'all',
            name: 'main',
            test: /[\\/]src[\\/](.*)[\\/]/,
          },
          flagIcons: {
            chunks: 'all',
            name: 'flagIcons',                
           //test: /[\\/]node_modules[\\/]@coreui[\\/]((icons).*)[\\/]/,
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((flag).*)[\\/]/,
          },
          freeIcons: {
            chunks: 'all',
            name: 'freeIcons',                
           //test: /[\\/]node_modules[\\/]@coreui[\\/]((icons).*)[\\/]/,
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((free).*)[\\/]/,
          },
          brandIcons: {
            chunks: 'all',
            name: 'brandIcons',                
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((brand).*)[\\/]/,
          },
          vendors: {
            chunks: 'all',
            name: 'vendors',
            test: /[\\/]node_modules[\\/]@coreui[\\/]((?!icons).*)[\\/]/,
          },
          // Merge all the CSS into one file
          styles: {
            name: 'styles',
            test: /\.s?css$/,
            chunks: 'all',
            minChunks: 1,
            reuseExistingChunk: true,
            enforce: true,
          }
        }
      }
    },

    plugins:[new WebpackBundleAnalyzer()]
  }
}

you may remove "WebpackBundleAnalyzer" after you are satisfied with the results.

Gilligan

Finally an answer I was searching for the past 2 hours :) Thanks! – Tomchay