直接区别:
configureWebpack项直接覆盖同名配置;chainWebpack项直接修改默认配置。
configureWebpack配置:
js
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
该代码段中的对象将会被webpack-merge合并入最终的Webpack配置中。
如果需要基于环境有条件地配置,或者想要直接修改配置,可以将configureWebpack配置成一个函数方法。代码如下:
js
// vue.config.js
module.exports = {
configureWebpack: config => {
if(process.env.NODE_ENV === 'production') {
// 为生产环境进行配置
} else {
// 为开发环境进行配置
}
}
}
采用configureWebpack的方式会直接覆盖同名的配置,如果只想修改某个配置的某一个子项,例如loader或plugin的选项,则很可能会覆盖掉不想要覆盖的默认配置,除非把这些默认配置再写一遍。
chainWebpack配置:
js
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
// 修改选项
return options
})
// 替换一个规则的loader
const svgRule = config.module.rule('svg')
svgRule.uses.clear() // 清除已有的所有loader
// 添加要替换的loader
svgRule
.use('use-svg-loader')
.loader('use-svg-loader')
}
}
chainWebpack项是一个函数,会接收一个基于webpack-chain的实例,该配置项提供了一个Webpack原始配置的上层抽象,使得可以定义具名的loader规则和具名的插件,并在后期对它们的选项进行修改。
chainWebpack提供了颗粒度更细的配置修改。
比起直接修改configureWebpack配置,chainWebpack的表达能力更强,也更为安全。
根据自己的场景自己选择。