Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么?

直接区别:

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的表达能力更强,也更为安全。

根据自己的场景自己选择。

相关推荐
Gracemark10 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼11 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_12 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing13 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工15 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码18 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199419 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光19 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥19 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司19 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js