vue-cli中webpack-chain的鏈式操作個人理解（解決90%的疑問）

此方泉愛學習發表於2019-04-02
VueWebAI

如果你看完了全文，請注意最後一句話

  • 命令 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確認配置，如果失效再去文件中尋找正確的配置方法。

相關文章