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

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

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

1.configureWebpack

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象,

configureWebpack不支持vue cli的语法糖或者说是不支持链式编程配置形式。只能通过操作对象的形式，来修改默认的webpack配置

下面来看一下configureWebpack配置方式：
1.1 configureWebpack对象形式

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

1.2 configureWebpack函数形式

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 (isProduction) {
      ...
    } else {
      ...
    }
    //直接修改配置
    config.resolve.alias['@asset'] = resolve('src/assets')
  }
}

或者

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 (isProduction) {
      ...
    } else {
      ...
    }
    //返回一个将要合并的对象
    return {
      resolve: {
        alias: {
          '@asset':resolve('src/assets')
        }
      }
    } 
  }
}

最好不要使用下面的方式，因为Object.assign方法在合并对象时，如果目标对象（config）上有相同的属性（resolve），将会被覆盖掉。不过这样写 Object.assign(config.resolve,{alias:{}}) 还是可以的，只是覆盖掉了alias。

Object.assign(config, {
  resolve: {
    alias: {
      '@': resolve('./src'),
      '@assets': resolve('./src/assets')
    }
  }
})

合并后，变成：

alias: {
  '@': resolve('./src'),
  '@assets': resolve('./src/assets')
}

2. chainWebpack

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

官方代码示例：

config
  .plugin(name)
  .use(WebpackPlugin, args)

参数说明：

name 是 webpack-chain 里的key，就是要加入的插件在 webpack-chain 配置里的 key ，就是我们自定义插件的名字,一般我们都保持跟插件名称相同

WebpackPlugin 使用的 webpack 插件名，在这里，可以直接使用插件，无需进行实例化，就是不需要 new WebpackPlugin()

args 插件的参数信息。特别注意，args是一个数组，例如 [{},{}] 这种方式，可以配置多个插件实例

具体例子：

module.exports = (config) => {
    // set svg-sprite-loader
    config.module
        .rule('svg')
        .uses.clear() // 先删除原有的默认svg rule，写法1,
        // .exclude.add(resolve('src/assets/icons')) // 写法2 针对svg默认规则，忽略src/assets/icons此文件夹下的
        .end()
    config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('./../src/assets/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]',
        })
        .end()

    //开启happyPack多线程打包
    config.plugin('HappyPack').use(HappyPack, [
        {
            loaders: [
                {
                    loader: 'babel-loader?cacheDirectory=true',
                },
            ],
        },
    ])
}

使用示例：
使用 HappyPack 开启多线程打包：这里可以写在 configureWebpack 也可以写在 chainWebpack 里面

1.configureWebpack

module.exports = {
    configureWebpack: config=>{
        config.plugin=[
            new HappyPack({
                loaders:[
                 {
                    loader: 'babel-loader?cacheDirectory=true',
                }
              ]
            })
        ]
    }
}

2.chainWebpack

//开启happyPack多线程打包
    config.plugin('HappyPack').use(HappyPack, [
        {
            loaders: [
                {
                    loader: 'babel-loader?cacheDirectory=true',
                },
            ],
        },
    ])

可以看到使用chainWebpack链式写法会简洁很多，不需要new，相当于是一个语法糖吧。

一些常用的webpack-chain 缩写方法

ChainedMap的有些key，可以直接作为方法调用，这些缩写方法也同样会返回原始实例，方便后续的链式调用。

devServer.hot(true);
devServer.set('hot', true);

.end() 通过.end()可以返回到更高层级的上下文，但是仅向上一个层级，并且返回一个mutate后的实例。或者是直接通过config是获取的顶级上下文。
.entry() 是webpack中config.entryPoints.get()的缩写。可以通过config.entry(name).add(value)的.entry()缩写方法配置，也可以通过config.entryPoints.get(name).add(value)配置。
.add() 这是一个ChainedSet方法，它可以将值添加在Set的尾部。
output这是一个ChainedMap对象，有很多方法，例如path()，filename()，publicPath()等常用的方法。
module 也是一个ChinedMap，主要方法为rules(),配置loader的规则，config.module.rule(name).use(name).loader(loader).options(options)，或者config.module.rule(name).use(name).tap(options => newOptions)
plugin 也是ChinedMap，主要是对plugin配置，config.plugin(name).use(WebpackPlugin, args)。重点对plugin做深入学习。

引入webpack-chain后如何配置plugin?

新增插件 adding
修改参数 modify arguments
修改实例 modify instantiation
移除插件 removing
某个插件前调用插件odering before
某个插件后调用插件ordering after

1.新增插件

config
    .plugin(name)
    .use(WebpackPlugin, args)
// 直接引入
config
  .plugin('hot')
  .use(webpack.HotModuleReplacementPlugin);
// 可以通过requrire('')的方式引入插件。
config
  .plugin('env')
  .use(require.resolve('webpack/lib/EnvironmentPlugin'), [{ 'VAR': false }]);

2.修改参数

config
    .plugin(name)
    .tap(args => newArgs)
// 为arguments新增一个'SECRET_KEY'
config
    .plugin('env')
    .tap(args => [...args, 'SECRET_KEY'])
修改实例
config
    .plugin(name)
    .init((Plugin, args) => new Plugin(...args));

2.删除插件

config.plugins.delete(name)

3.某个插件前调用插件odering before (不能在同一个插件上既使用before又使用after)

config
    .plugin(name)
      .before(otherName)
// 例子
config
    .plugin('html-template')
        .use(HtmlWebpackTemplate)
        .end()
    .plugin('script-ext')
        .use(ScriptExtWebpackPlugin)
        before('html-template')

4.某个插件后调用插件ordering after(不能在同一个插件上既使用before又使用after)

config
    .plugin(name)
      .after(otherName)
// 例子
config
    .plugin('html-template')
     .use(HtmlWebpackTemplate)
     .after('script-ext')
     .end()
     .plugin('script-ext')
     .use(ScriptExtWebpackPlugin)

转自：https://www.jianshu.com/p/27d82d98a041

vue.config中configureWebpack 与 chainWebpack

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

1.configureWebpack

或者

2. chainWebpack

具体例子：

你可能感兴趣的:(vue.config中configureWebpack 与 chainWebpack)