vue-cli中webpack-chain的链式操作个人理解（解决90%的疑问）

如果你看完了全文，请注意最后一句话

• 命令 vue inspect > webpack.test.js 将配置文件导出并保存到webpack.test.js文件 根据很多相关文章中的例子 vue inspect plugins 命令可以单独查看plugins的配置。 想查看其他配置怎么办呢？？

假如生成的webpack文档如下

//vue inspect 生成的webpack文件内容
{
  mode: 'development',
  context: 'D:\\workspace\\my_vue\\demo',
  devtool: 'source-map',
  node: {
    setImmediate: false,
    process: 'mock',
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  ...
}
复制代码

实际测试了下
查看mode 执行 vue inspect mode
查看node 下的 child_process配置 执行 vue inspect node.child_process
因此我们可以推断出 想要查看rules的配置 执行 vue inspect module.rules

之后我在文档中找到了对应的说明 审查项目的-webpack-配置。

• 经常看到的链式操作的例子

const merge = require('webpack-merge')
module.exports = {
      productionSourceMap: true,
      publicPath: 'vue',
      chainWebpack: config => {
        config.devtool('source-map')
        config.module
          .rule('images')
          .use('url-loader')
          .tap(options => // tap修改参数的方法
            merge(options, { //merge方法是保证我们不会覆盖掉原有的其他配置
              limit: '1120'
            })
          )
      }
}
复制代码

一开始看到的时候并不能理解，同样我们看下实际生成的内容

{ 
  devtool:'source-map',
  ...
  module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    rules: [     
        ...
        /* config.module.rule('images') */
        {
          test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
          use: [
          /* config.module.rule('images').use('url-loader') */
          {
            loader: 'url-loader',
            options: {
              limit: '1120',
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
          ...
          ]
        }
    ]
  }
  ...
}
复制代码

这么看起来豁然开朗，生成webpack的配置中就有了一些说明。
同时我们还能发现，

• 配置的json数据中的第一层即使方法的名字，配置的值就是方法的参数。
• 如果该配置为一个对象里面有子配置，则执行完该配置的方法后，供链式配置的上下文会进到子配置里面，此时在使用子配置项做为方法名继续配置。
• 使用end()方法可以返回一级。

虽然大部分都可以像总结的那样配置然而有些还是有差别的。比如原配置是数组的rules。这只是一种速记方法。

现在我们来继续配置修改rule(media)的配置

const merge = require('webpack-merge')
module.exports = {
  productionSourceMap: true,
  publicPath: 'vue',
  chainWebpack: config => {
    config.devtool('source-map')
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options =>
        merge(options, {
          limit: '1120'
        })
      )
      .end() //返回到loader配置这一层
      .end() //返回到rules配置这一层
      .rule('media')//配置新的rule
      .use('url-loader')
      .tap(options =>
        merge(options, {
          limit: '1120'
        })
      )
  }
}

复制代码

这只是我个人的理解，希望可以帮助其他朋友，然而这是根据结果推断的，因此会与实际的文档会有很多不同，可以当成辅助记忆的一种方法。开发的过程中，应当与 webpack-chain官方文档为主。配置完通过vue inspect确认配置，如果失效再去文档中寻找正确的配置方法。