vue.config.js中configureWebpack和chainWebpack区别

相关链接

在vue.config.js导出的配置文件中，新增configureWebpack和chainWebpack节点，来定义webpack的打包配置。
configureWebpack和chainWebpack的配置相同，唯一区别就是它们修改webpack配置的方式不同
1.chainWebpack通过链式编程的方式来修改；

如：为生产环境和开发环境修改配置

// vue.config.js
module.exports = {
    
    
  configureWebpack: config => {
    
    
    if (process.env.NODE_ENV === 'production') {
    
    
      // 为生产环境修改配置...
    } else {
    
    
      // 为开发环境修改配置...
    }
  }
}

2.configureWebpack通过操作对象的方式来修改。

如：添加一个新的 Loader

// vue.config.js
module.exports = {
    
    
  chainWebpack: config => {
    
    
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}