vue.config.js中configureWebpack与chainWebpack区别

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

https://cli.vuejs.org/zh/config/#configurewebpack

 

 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')
  }
}