对于webpack-chain 在vue.config.js中的一些总结
-
为何选择使用webpack-chain?
- 对vue.config.js进行更细的配置(保存原来的options，添加信息的options)
- 审查当前的vue配置并输出到 指定文件：vue inspect > output.js
如何 配置loader
chainWebpack: config => {
config.module.rule('规则名称')
.test('匹配规则的表达式')
.exclude
.add('匹配不需要进行使用loader的表达式') // exclude(xxx)
.end() //返回上一级
.use('loader的名称')
.loader('loader的名称') // use:'xxx'
.tap(options => {
// 修改它的选项...
// 可以对这里的options进行配置
return options;
}) // options:{}
.end() // 返回上一级 继续添加loader
.use('loader的名称')
.loader('loader的名称') // use:'xxx'
.tap(options => {
// 修改它的选项...
// 可以对这里的options进行配置
return options;
}) // options:{}
}
// 一个🌰:对svg的优雅处理
config.module
.rule("svgIcon")
.test(/\.svg$/)
.include.add(resolve("src/components/l-icon/svg"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.tap(options => {
options = {
symbolId: "icon-[name]"
};
return options;
});
// 原有的svg图像处理loader添加exclude
config.module
.rule("svg")
.exclude.add(resolve("src/components/l-icon/svg"))
.end();
复制代码
- 如何 配置plugin
chainWebpack: config => {
// 使用 基本使用 进行处理
config.plugin(name) // 保证name的唯一性，避免出现覆盖的情况
.use(plugin, options) // plugin：plugin的实例 options:plugin的配置
// DllReferencePlugin
arr.map((item, index) => {
if (item.endsWith('.js')) {
// 使用 AddAssetHtmlPlugin 进行处理
config.plugin( `AddAssetHtmlPlugin${index}` ) //注意这里的index，不然会出现覆盖的情况。
.use(AddAssetHtmlPlugin, [{
filepath: pathResolve('dll/' + item),
publicPath: 'dll/',
outputPath: 'dll' //打包结果中的dll将会放到这个文件夹下面
}])
}
if (item.endsWith('.json')) {
// 使用 webpack.DllReferencePlugin 进行处理
config.plugin( `DllReferencePlugin${index}` )
.use(webpack.DllReferencePlugin, [{
manifest: pathResolve('dll/' + item)
}])
}
})
}
复制代码
- 如何 配置 optimization
chainWebpack: config => {
config.optimization.minimizer('terser')
.tap(args => {
const {
terserOptions: {
compress
}
} = args[0]
compress.pure_funcs = ['console.log'];
return args;
})
.end()
.splitChunks({
maxSize: 100 * 1024, // 控制包的最大字节数
minSize: 10 * 1024, // 控制包的最小字节数
minChunks: 1,
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
style: {
name: 'chunk-style',
test: /.(css|scss)$/,
priority: 20,
chunks: 'all'
},
component: {
name: 'chunk-component',
test: path.resolve(__dirname, 'src/common/components'),
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
}
复制代码
- 不同环境配置 when
chainWebpack: config => {
// config.when(condition,config=>{
// 满足条件的配置函数
// },config=>{
// 不满足条件的配置函数
// })
config.when(process.env.VUE_APP_MODE === 'analyzer',
/* -- 打包分析 配置 -- */
config => {
// 打包分析
config.plugin('analyzer')
.use(WebpackBundleAnalyzer)
}
)
}
复制代码
- 其他配置
// 配置扩展名
config.resolve.extensions
.prepend('.ts') // prepend : 在extensions数组的前面 插入值(类似数组的unshift方法)
.add('.tsx') // add: 在extensions数组的后面 插入值(类似数组的push方法)
// alias
config.resolve.alias
.set('@Utils', pathResolve('./src/Application/utils'))
