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