关闭css的单独分块，vue cli 3 webpack 4
关闭css的单独分块，vue cli 3 webpack 4
提问于 2019-02-18 21:16:55
我正在使用最新版本的vue cli 3创建的项目。我使用的是默认配置，我的路由器有许多动态导入的路由。在生产环境中运行时，我的css和js都被分成了多个块。而使用js的行为是合乎需要的。我的css文件很小，我想关闭css的块。
如何通过vue.config.js文件配置webpack完成此操作。请帮助准确的命令，因为我发现webpack的配置和链语法非常混乱的.Thanks：)
回答 2
Stack Overflow用户
发布于 2019-03-27 15:44:21
在项目vue.config.js的根目录下创建
- 文件
我也使用了很少的其他选项，但你需要的是这个。
const path = require('path');
module.exports = {
lintOnSave: true,
filenameHashing: false,
chainWebpack: config => {
config.optimization.delete('splitChunks')
}
};这将删除创建的块，并且只允许您使用CSS和JS的单个文件。
filenameHashing: false此部分将删除files.config.optimization.delete('splitChunks')上的哈希，这将删除区块。
更具体地说，满足您的需求。
使用这些配置
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,
},
},
}
}
};通过这种方式，您的JS代码将被拆分成块，但CSS文件将合并在一个块中。
更重要的是，如果您还想配置JS块，您可以使用这些设置。
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,
},
},
}
}
};Stack Overflow用户
发布于 2020-01-10 08:29:27
对于Webpack 4，您可以看到这个示例(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()]
}
}您可以在对结果满意后删除"WebpackBundleAnalyzer“。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54748202
复制相关文章
相似问题
腾讯云开发者
