vue.config.js中configureWebpack与chainWebpack区别

configureWebpack与chainWebpack的作用相同，唯一的区别就是他们修改webpack配置方式不同：

cli.vuejs.org/zh/config/#…

configureWebpack 通过操作对象的形式来修改webpack配置，该对象将会被webpack-merge合并入最终的webpack配置

chainWebpack 通过链式编程的形式来修改默认的webpack配置

1.configureWebpack
1.1configureWebpack对象形式

configureWebpack: {
  resolve: {
   // 别名配置
    alias: {
      'assets': '@/assets',
      'common': '@/common',
　　　　'components': '@/components'
    }    
  }  
}

1.2configureWebpack函数形式

const path = require('path');
function resolve(dir) {
　　return path.join(__dirname,dir)
}
module.exports = { 
    devServer: {   
        ... 
    }, 
    lintOnSave:false, // eslint-loader 是否在保存时候检查代码 
    productionSourceMap: false, // 生产环境是否生成sourceMap 文件
    filenameHashing: true, // 文件hash　　
    configureWebpack: config => {  　　　　
        if(process.env.NODE_ENV === 'production') {    　　　　　　
            ...  　　　　
        }else {    　　　　　　
            ...  　　　　
        }  　　　　
        // 直接修改配置  　　　　
        config.resolve.alias['assets'] = resolve('src/assets') 　　
    }
}

或者

configureWebpack: config => {
  if(process.env.NODE_ENV){
    ...
  }else{
    ...
  }
  // 返回一个将要合并得对象
  return {
    resolve: {
      alias: {
        '@asset': resolve("src/assets")
      }
    }
  }
}

2.chainWebpack

修改Loader选项

module.exports = {
  chainWebpack: config => {
    config.module
    .rule('vue')
    .use('vue-loader')
    .tap(options => {
      // 修改他的选项
      return options
    })
  }
}

添加一个新的Loader

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

替换一个规则里的Loader

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清楚已有的所有loader。
    // 如果你不这样做，接下来的loader会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    // 添加要替换的 loader 
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}