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 : )
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
.
filenameHashing: false
this part will remove the hashing on files.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,
},
},
}
}
};