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確認配置，若是失效再去文檔中尋找正確的配置方法。