vue-cli中chainWebpack的使用

前言

在項目開發中咱們不免碰到須要對webpack配置更改的狀況，今天就主要來說一下在vue.config.js中對一些配置的更改，簡單介紹一下loader的使用；用configureWebpack簡單的配置；用chainWebpack作高級配置；包括對loader的添加，修改；以及插件的配置

一、首先簡單介紹一下webpack中loader的簡單使用：

loader：是webpack用來預處理模塊的，在一個模塊被引入以前，會預先使用loader處理模塊的內容，在你打包的時候對某些內容須要loader來處理一下，好比css模塊；默認webpack只會處理js代碼，因此當咱們想要去打包其餘內容時，就須要相應的loader去處理某些內容
使用方法：
在配置文件中webpack.config.js加入module屬性，該屬性是一個對象,在這個屬性中有一個rules字段，先上代碼

module:{
        rules:[{
            test:/\.js$/,
            use:[{
                loader:'babel-loader',
                options: {
                presets: [
                  "es2015", "react"
                ],
                plugins: ["syntax-dynamic-import"]
          }
            }]
        }]
    }

rules是一個數組，你全部的loader配置均可以寫在這個數組裏，每一個loader配置是一個對象，匹配不一樣的規則；
test:test後是一個正則表達式，匹配不一樣的文件類型;
use:在這個規則中，當你匹配了這個文件後，須要使用相應的loader去處理這類型的文件，use接收的是一個數組，意味着當他匹配到文件後，它能夠啓用不少的loader去處理文件的內容；
若是使用的是loader的默認配置，能夠寫use:['css-loader','style-loader']；
若是是須要用到額外配置則須要寫成對象，講配置寫在options裏；

固然，還會有其餘的一些屬性好比（exclude、include等），這裏就再也不詳細贅述
在你使用這些loader以前須要用npm去安裝這些包；

二、用configureWebpack簡單的配置；

/ vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

該對象將會被 webpack-merge 合併入最終的 webpack 配置。
若是你須要基於環境有條件地配置行爲，或者想要直接修改配置，那就換成一個函數 (該函數會在環境變量被設置以後懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內，你能夠直接修改配置，或者返回一個將會被合併的對象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
    } else {
      // 爲開發環境修改配置...
    }
  }
}

三、用chainWebpack作高級配置

Vue CLI 內部的 webpack 配置是經過 webpack-chain 維護的。這個庫提供了一個 webpack 原始配置的上層抽象，使其能夠定義具名的 loader 規則和具名插件，並有機會在後期進入這些規則並對它們的選項進行修改。

它容許咱們更細粒度的控制其內部配置。接下來有一些常見的在 vue.config.js 中的 chainWebpack 修改的例子。
官方文檔給我提供了一些簡單的示例：
修改 Loader 選項

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的選項...
          return options
        })
  }
}

添加一個新的 Loader

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
  }
}

替換一個規則裏的 Loader，

// 添加svg-sprite-loader
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .tap(options => {
        options = {
          symbolId: 'icon-[name]'
        }
        return options
      })

修改插件的代碼能夠看下面的例子；
先上代碼，今天主要講咱們項目中配置，配置的api地址：https://cli.vuejs.org/zh/conf...

const path = require('path')
const webpack = require('webpack')
module.exports = {
  // 修改output.path
  outputDir: 'dist',
  // 修改output.publishPath
  publishPath: './',
  chainWebpack: config => {
    // 添加全局scss文件
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => { //匹配到全部須要導入的文件
      config.module.rule('scss').oneOf(type).use('style-resource')
        .loader('style-resources-loader')
        .options({
          patterns: [
            path.resolve(__dirname, 'src/css/base.scss')
          ]
        })
    })
    // 添加svg-sprite-loader
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .tap(options => {
        options = {
          symbolId: 'icon-[name]'
        }
        return options
      })
    // 移除 prefetch 插件 //預加載
    config.plugins.delete('prefetch')
    // 引入
    const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : 'dist'
    config.plugin('dll-reference-plugin')
      .use(webpack.DllReferencePlugin)
      .tap(options => {
        options[0] = {
          context: __dirname,
          manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
        }
        return options
      })
    config.plugin('add-asset-html-webpack-plugin')
      .use('add-asset-html-webpack-plugin')
      .tap(options => {
        options[0] = {
          filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
        }
        return options
      })
  }
}

上述代碼裏使用了style-resources-loader，能夠自動化導入文件；
添加svg-sprite-loader的目的是爲了將svg圖片轉換爲svg標籤插入html，以方便便咱們使用相似如下方式，webpack裏默認處理svg的loader是file-loader，因此要移除這個配置：

DllReferencePlugin這個插件是爲了使第三方以來和咱們本身編寫的代碼分開打包，提高打包速度；須要和add-asset-html-webpack-plugin這個插件一塊兒使用；
使用這個插件打包後，在src/common_chunk這個文件夾下生成工具庫，將第三方依賴打包到一個文件裏，並生成一個全部庫代碼的一個索引manifest.json文件

ps:全局引入公共樣式文件的另外一種方法，這樣也能夠直接在使用公共樣式了；

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        // 根據本身樣式文件的位置調整
        data: `@import "@src/css/base.scss";`
      }
    }
  }
};

本文參考的文檔：https://cli.vuejs.org/zh/guid...