讀 VuePress(二):使用 Webpack-chain 鏈式生成 webpack 配置

前言

vuepress 有三套 webpack 配置:基礎配置、dev 配置、build 配置,看似和普通的一個前端項目也沒什麼差異,但它使用 webpack-chain 生成配置而不是傳統的寫死配置。css

相關源碼見 createBaseConfig.jscreateClientConfigcreateServerConfig前端

webpack-chain 簡介

鏈式包裝器

引入 webpack-chain 後,咱們全部的 webpack 配置經過一個鏈式包裝器即可生成了:vue

const Config = require('webpack-chain');
const config = new Config();
// 鏈式生成配置
...
// 導出 webpack 配置對象
export default config.toConfig();
複製代碼

在引入詳細的示例以前,先讓咱們介紹一下 webpack-chain 中內置的兩種數據結構:ChainMap、ChainSet。webpack

ChainedSet

帶鏈式方法的集合。git

很顯然,它和 ES6 的 Set 相似,都擁有鍵值對,但值得一提的是:它經過鏈式方法來操做。github

在 webpack-chain 中,屬於 ChainedSet 的有 config.entry(name)config.resolve.modules 等。web

假如咱們須要指定 webpack 配置的 enrty,咱們只須要這樣作:npm

config
  .entry('app')
    .add('src/index.js')
複製代碼

它等價於 webpack 配置對象的這部分:sass

entry: {
  app: './src/index.js'
}
複製代碼

固然,我想強調的 ChainedSet 真正強大的地方,在於 ChainedSet 提供的內置方法:add(value)、delete(value)、has(value) 等。bash

這能夠幫助咱們增刪改查整個 webpack 配置中的任意一個部分。

ChainedMap

帶鏈式方法的哈希表。

同上,它和 ES6 的 Map 相似,也經過鏈式方法來操做。

在 webpack-chain 中,屬於 ChainedMap 的有 configconfig.resolve 等。

想了解更多 API 用法的讀者能夠前往文檔

webpack-chain 原理簡介

咱們打開源碼目錄:

webpack-chain 源碼目錄

一共有三種類:Chainable、ChainedSet 或 ChainedMap、其它。

鏈式調用

Chainable 實現了鏈式調用的功能,它的代碼很簡潔:

module.exports = class {
  constructor(parent) {
    this.parent = parent;
  }

  batch(handler) {
    handler(this);
    return this;
  }

  end() {
    return this.parent;
  }
};
複製代碼

最常調用的 end 方法即是來源於這了,它會返回調用鏈中最前端的那個對象。

好比說,咱們在 vuepress 中有這樣一段代碼:

config
    .use('cache-loader')
    .loader('cache-loader')
    .options({
      cacheDirectory,
      cacheIdentifier
    })
    .end()
    .use('babel-loader')
      .loader('babel-loader')
      .options({
        // do not pick local project babel config
        babelrc: false,
        presets: [
          require.resolve('@vue/babel-preset-app')
        ]
      })
複製代碼

第八行結尾 end() 處返回的便又是 config 了。

ChainedSet 和 ChainedMap 都繼承於 Chainable,其餘類大多都繼承於 ChainedSet 或 ChainedMap,除了 Use 和 Plugin 類使用 Orderable 這個高階函數包裝了一下(至關於裝飾器),目的在於解決在使用 module.use 或 plugin 時調整順序的問題。有興趣的讀者能夠自行翻閱源碼~

在 Vuepress 中的應用

分紅三個配置咱們就不贅述了,畢竟你們日常開發的項目中也可能這樣作。在這裏我須要特別提一下的地方即是編寫函數生成 webpack 配置

舉個例子,在 createBaseConfig 裏,有一個這樣的函數:

function createCSSRule (lang, test, loader, options) {
  const baseRule = config.module.rule(lang).test(test)
  const modulesRule = baseRule.oneOf('modules').resourceQuery(/module/)
  const normalRule = baseRule.oneOf('normal')

  applyLoaders(modulesRule, true)
  applyLoaders(normalRule, false)

  function applyLoaders (rule, modules) {
    if (!isServer) {
      if (isProd) {
        rule.use('extract-css-loader').loader(CSSExtractPlugin.loader)
      } else {
        rule.use('vue-style-loader').loader('vue-style-loader')
      }
    }

    rule.use('css-loader')
      .loader(isServer ? 'css-loader/locals' : 'css-loader')
      .options({
        modules,
        localIdentName: `[local]_[hash:base64:8]`,
        importLoaders: 1,
        sourceMap: !isProd
      })

    rule.use('postcss-loader').loader('postcss-loader').options(Object.assign({
      plugins: [require('autoprefixer')],
      sourceMap: !isProd
    }, siteConfig.postcss))

    if (loader) {
      rule.use(loader).loader(loader).options(options)
    }
  }
}
複製代碼

它作了這樣一件事:對特定的一種樣式語言進行 css 模塊化和非模塊化的處理,順序是 loader -> postcss-loader -> css-loader -> vue-style-loader 或 extract-css-loader。 使用方式是這樣的:

createCSSRule('css', /\.css$/)
createCSSRule('postcss', /\.p(ost)?css$/)
createCSSRule('scss', /\.scss$/, 'sass-loader', siteConfig.scss)
createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign({ indentedSyntax: true }, siteConfig.sass))
createCSSRule('less', /\.less$/, 'less-loader', siteConfig.less)
createCSSRule('stylus', /\.styl(us)?$/, 'stylus-loader', Object.assign({
  preferPathResolver: 'webpack'
}, siteConfig.stylus))
複製代碼

是否是一下減小了配置的編寫量?並且還很靈活的支持用戶自定義 options 和後期的代碼變動。

結語

何時應該使用 webpack-chain 呢?畢竟它的引入增長了項目的成本,個人答案是:

  1. 當項目的 webpack 配置須要根據某些邏輯生成的時候,推薦引入 webpack-chain 對 webpack 配置進行聲明式的編寫。
  2. 若是 webpack 配置很簡單或者直接寫死一個對象就行,不推薦引入 webpack-chain,若是有多個配置須要合併的需求,能夠引入 webpack-merge。
相關文章
相關標籤/搜索