[[392405]]

今天給大家介紹社區(qū)當(dāng)中一個(gè) webpack 的流式配置方案——webpack-chain，這個(gè)方案現(xiàn)在已經(jīng)在我目前所在的團(tuán)隊(duì)落地，且?guī)?lái)了一些正向的收益，現(xiàn)在就這個(gè)方案出現(xiàn)的背景、核心概念及日常使用姿勢(shì)給大家展開(kāi)介紹。

為什么出現(xiàn) webpack-chain ?

相信大家都對(duì)業(yè)界鼎鼎有名的構(gòu)建工具Webpack并不陌生了，作為目前為止最穩(wěn)定、生產(chǎn)環(huán)境應(yīng)用最多的構(gòu)建打包工具，它固然有著很多優(yōu)勢(shì)，比如:

• 生態(tài)豐富。在社區(qū)有大量的 loader 和 plugin，想要的基本都能找到。
• 可插拔的插件機(jī)制?；?Tapable 實(shí)現(xiàn)的可擴(kuò)展架構(gòu)。
• 文檔成熟。有中文版，且一直在更新和維護(hù)。
• 穩(wěn)定性高?，F(xiàn)在正式的前端項(xiàng)目生產(chǎn)環(huán)境下基本用 Webpack 來(lái)構(gòu)建，經(jīng)過(guò)這么多年業(yè)界的驗(yàn)證，該踩的坑也都踩的差不多了。

但其實(shí)說(shuō)了這么多優(yōu)勢(shì)，大家估計(jì)還是對(duì)這個(gè)東西沒(méi)什么好感，因?yàn)檫€有最重要的一點(diǎn)不容忽視，那就是開(kāi)發(fā)體驗(yàn)。對(duì)于構(gòu)建打包這個(gè)事情來(lái)說(shuō)，本來(lái)就是工程化當(dāng)中的一個(gè)細(xì)節(jié)極其復(fù)雜的環(huán)節(jié)，需要輸入大量的配置信息來(lái)保證打包結(jié)果符合預(yù)期。在Webpack當(dāng)中，我們?nèi)绻挥闷渌姆桨福椭挥惺謩?dòng)地配置一個(gè)巨大的 JavaScript 對(duì)象，所有的配置信息都在這個(gè)對(duì)象當(dāng)中，這樣原始的方式的確給人體驗(yàn)很不好，歸納為以下幾個(gè)原因：

1. 對(duì)象過(guò)于龐大，直觀上讓人看的眼花繚亂，盡管可以封裝一些邏輯，但還是避免不了深層的嵌套配置;
2. 難以動(dòng)態(tài)修改。舉個(gè)例子，如果通過(guò)腳本動(dòng)態(tài)修改一些配置信息，比如刪除 babel-loader 的一個(gè) plugin，那么需要從最頂層的配置對(duì)象，一步步找到到 babel-loader 的位置，然后遍歷插件列表，這個(gè)手動(dòng)尋找和遍歷的過(guò)程比較繁瑣。
3. 難以共享配置。如果你嘗試跨項(xiàng)目共享 webpack 配置對(duì)象，那后續(xù)的修改就會(huì)變的混亂不堪，因?yàn)槟阈枰獎(jiǎng)討B(tài)地修改原來(lái)的配置。

社區(qū)當(dāng)中也有人發(fā)現(xiàn)了這些痛點(diǎn)，于是出現(xiàn)了針對(duì)Webpack的流式配置方案——webpack-chain。

webpack-chain 核心概念

其實(shí)真正學(xué)會(huì) webpack-chain，我覺(jué)得首先不是去學(xué)習(xí)具體每個(gè)屬性的配置方法，而是理解webpack-chain核心的兩個(gè)對(duì)象——ChainedMap和ChainedSet。

什么是 ChainMap ?

比如我現(xiàn)在配置路徑別名:

config.resolve.alias 
  .set(key, value) 
  .set(key, value) 
  .delete(key) 
  .clear() 

那么，現(xiàn)在的 alis 對(duì)象就是一個(gè)ChainMap。如果一個(gè)屬性在webpack-chain當(dāng)中標(biāo)記為ChainMap之后，它會(huì)有一些額外的方法，并且允許這些鏈?zhǔn)秸{(diào)用(如上面的示例)。

接下來(lái)就來(lái)一個(gè)個(gè)認(rèn)識(shí)這些方法:

// 清空當(dāng)前 Map 的所有屬性 
clear() 
// 通過(guò)鍵值從 Map 移除單個(gè)配置. 
delete(key) 
// Map中是否存在一個(gè)配置值的特定鍵，返回真或假 
has(key) 
// 返回 Map中已存儲(chǔ)的所有值的數(shù)組 
values() 
//  提供一個(gè)對(duì)象，這個(gè)對(duì)象的屬性和值將映射進(jìn) Map。第二個(gè)參數(shù)為一個(gè)數(shù)組，表示忽略哪些屬性 
merge(obj, omit) 
// handler: ChainedMap => ChainedMap 
// 一個(gè)把ChainedMap實(shí)例作為單個(gè)參數(shù)的函數(shù) 
batch(handler) 
// condition: Boolean 
// whenTruthy: ChainMap -> any, 條件為真時(shí)執(zhí)行 
// whenFalsy: ChainSet -> any, 條件為假時(shí)執(zhí)行 
when(condition, whenTruthy, whenFalsy) 
// 獲取 Map 中相應(yīng)鍵的值 
get(key) 
// 先調(diào)用 get，如果找不到對(duì)應(yīng)的值, 就返回 fn 函數(shù)返回的結(jié)果 
getOrCompute(key, fn) 
// 配置鍵值對(duì) 
set(key, value) 

這些方法的返回對(duì)象也都是 ChainMap，這樣可以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，簡(jiǎn)化操作。在 Webpack中，大部分的對(duì)象都是 ChainMap，具體大家可以去源碼當(dāng)中看看，實(shí)現(xiàn)并不復(fù)雜。

ChainMap 是webpack-chain當(dāng)中非常重要的一個(gè)數(shù)據(jù)結(jié)構(gòu)，封裝了鏈?zhǔn)秸{(diào)用的方法，以至于后面所有 ChainMap 類型的配置都可以直接復(fù)用ChainMap本身的這些方法，非常方便。

什么是 ChainSet ?

跟 ChainMap 類似，封裝了自己的一套 API:

// 末尾增加一個(gè)值 
add(value) 
// 在開(kāi)始位置增加一個(gè)值 
prepend(value) 
// 清空 set 內(nèi)容 
clear() 
// 刪除某個(gè)值 
delete(value) 
// 判斷是否有某個(gè)值 
has(value) 
// 返回值列表 
values() 
// 合并給定的數(shù)組到 Set 尾部。 
merge(arr) 
// handler: ChainSet => ChainSet 
// 一個(gè)把 ChainSet 實(shí)例作為單個(gè)參數(shù)的函數(shù) 
batch(handler) 
// condition: Boolean 
// whenTruthy: ChainSet -> any, 條件為真時(shí)執(zhí)行 
// whenFalsy: ChainSet -> any, 條件為假時(shí)執(zhí)行 
when(condition, whenTruthy, whenFalsy) 

ChainSet 的作用和ChainMap類似，也是封裝了底層鏈?zhǔn)秸{(diào)用的 API，在需要操作Webpack配置當(dāng)中的數(shù)組類型的屬性時(shí)，通過(guò)調(diào)用ChainSet的方法即可完成。

速記方法

對(duì)于 ChainMap，有這樣一種簡(jiǎn)化的寫(xiě)法，官網(wǎng)稱之為速記寫(xiě)法:

devServer.hot(true); 
 
// 上述方法等效于: 
devServer.set('hot', true); 

因此，在實(shí)際的webpack-chain配置中，可以經(jīng)?？吹街苯?.屬性()這樣調(diào)用方式，是不是感覺(jué)很巧妙?源碼當(dāng)中的實(shí)現(xiàn)非常簡(jiǎn)單:

extend(methods) { 
  this.shorthands = methods; 
  methods.forEach(method => { 
    this[method] = value => this.set(method, value); 
  }); 
  return this; 
} 

在ChainMap初始化的時(shí)候，會(huì)調(diào)用 extend 方法，然后把屬性列表作為 methods參數(shù)直接傳入，然后通過(guò)下面一行代碼間接調(diào)用 set 方法:

this[method] = value => this.set(method, value); 

這樣的設(shè)計(jì)也是值得學(xué)習(xí)的。

配置 Webpack

首先，需要?jiǎng)?chuàng)建一個(gè)新的配置對(duì)象:

const Config = require('webpack-chain'); 
 
const config = new Config(); 
 
// 一系列鏈?zhǔn)讲僮髦?nbsp;
// 得到最后的 webpack 對(duì)象 
console.log(config.toConfig()) 

然后依次配置 resolve、entry、output、module、plugins、optimization 對(duì)象，本文關(guān)鍵還是帶大家能夠落地 webpack-chain，因此詳細(xì)介紹一下各個(gè)配置的使用方法。

entry 和 output

這里列舉一個(gè)常用的配置，由于 Webpack 在 entry 和 output 掛了太多屬性，大家參考 Webpack 官方文檔照著如下的方式去配就好了。

config.entryPoints.clear() // 會(huì)把默認(rèn)的入口清空 
config.entry('entry1').add('./src/index1.tsx')//新增入口 
config.entry('entry2').add('./src/index2.tsx')//新增入口 
 
config.output 
      .path("dist") 
      .filename("[name].[chunkhash].js") 
      .chunkFilename("chunks/[name].[chunkhash].js") 
      .libraryTarget("umd") 

alias

對(duì)于路徑別名的配置，也是幾乎所有項(xiàng)目必不可少的部分，配置方式如下:

// 可以發(fā)現(xiàn) resolve.alias 其實(shí)是一個(gè) ChainMap 對(duì)象 
config.resolve.alias 
  .set('assets',resolve('src/assets')) 
  .set('components',resolve('src/components')) 
  .set('static',resolve('src/static')) 
  .delete('static') // 刪掉指定的別名 

plugins

插件的配置可以說(shuō)是相當(dāng)重要的一個(gè)環(huán)節(jié)了，webpack-chain 當(dāng)中的配置會(huì)和平時(shí)的配置有些不同，讓我們來(lái)具體看看。

1. 添加一個(gè)插件

// 先指定名字(這個(gè)名字是自定義的)，然后通過(guò) use 添加插件 
config 
  .plugin(name) 
  .use(WebpackPlugin, args) 

舉個(gè)例子:

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
 
// 先指定名字(這個(gè)名字可以自定義)，然后通過(guò) use 添加插件，use 的第二個(gè)參數(shù)為插件參數(shù)，必須是一個(gè)數(shù)組，也可以不傳 
config.plugin('extract') 
  .use(ExtractTextPlugin, [{ 
    filename: 'build.min.css', 
    allChunks: true, 
  }]) 

2. 移除插件

移除一個(gè)插件很簡(jiǎn)單，還記得添加插件時(shí)我們指定了每個(gè)插件的 name 嗎?現(xiàn)在通過(guò)這個(gè) name 移除即可:

config.plugins.delete('extract') 

3. 指定插件在 xx 插件之前/之后調(diào)用

比如，我現(xiàn)在需要指定 html-webpack-plugin 這個(gè)插件在剛剛寫(xiě)的 extract 插件之前執(zhí)行，那么這么寫(xiě)就行了:

const htmlWebpackPlugin = require('html-webpack-plugin'); 
 
config.plugin('html') 
  .use(htmlWebpackPlugin) 
  .before('extract') 

通過(guò) before 方法，傳入另一個(gè)插件的 name 即可，表示在另一個(gè)插件之前執(zhí)行。

同樣，如果需要在 extract 插件之后執(zhí)行，調(diào)用 after 方法:

config.plugin('html') 
  .use(htmlWebpackPlugin) 
  .after('extract') 

4. 動(dòng)態(tài)修改插件參數(shù)

我們也可以用 webpack-chain 來(lái)動(dòng)態(tài)修改插件的傳參，舉個(gè)例子:

// 使用 tap 方法修改參數(shù) 
config 
  .plugin(name) 
  .tap(args => newArgs) 

5. 修改插件初始化過(guò)程

我們也可以自定義插件的實(shí)例化的過(guò)程，比如下面這樣:

// 通過(guò) init 方法，返回一個(gè)實(shí)例，這將代替原有的實(shí)例化過(guò)程 
config 
  .plugin(name) 
  .init((Plugin, args) => new Plugin(...args)); 

loader

loader 是 Webpack 中必不可少的一個(gè)配置，下面我們來(lái)看看 loader 的相關(guān)操作。

1. 添加一個(gè) loader

config.module 
  .rule(name) 
    .use(name) 
      .loader(loader) 
      .options(options) 

舉個(gè)例子:

config.module 
  .rule('ts') 
  .test(/\.tsx?/) 
  .use('ts-loader') 
    .loader('ts-loader') 
    .options({ 
      transpileOnly: true 
    }) 
    .end() 

2. 修改 loader 參數(shù)

可通過(guò) tap 方法修改 loader 的參數(shù):

config.module 
  .rule('ts') 
  .test(/\.tsx?/) 
  .use('ts-loader') 
    .loader('ts-loader') 
    .tap(option => { 
      // 一系列 
      return options; 
    }) 
    .end() 

在所有的配置完成之后，可以通過(guò)調(diào)用config.toConfig()來(lái)拿到最后的配置對(duì)象，可以直接作為webpack的配置。

3. 移除一個(gè) loader

// 通過(guò) uses 對(duì)象的 delete 方法，根據(jù) loader 的 name 刪除 
config.module 
  .rule('ts') 
  .test(/\.tsx?/) 
  .uses.delete('ts-loader') 

optimization

Webpack 中的optimization也是一個(gè)比較龐大的對(duì)象，參照官方文檔：https://webpack.js.org/configuration/optimization/。

這里以其中的 splitChunks 和 minimizer 為例來(lái)配置一下:

config.optimization.splitChunks({ 
     chunks: "async", 
     minChunks: 1, // 最小 chunk ，默認(rèn)1 
     maxAsyncRequests: 5, // 最大異步請(qǐng)求數(shù)， 默認(rèn)5 
     maxInitialRequests : 3, // 最大初始化請(qǐng)求數(shù)，默認(rèn)3 
     cacheGroups:{ // 這里開(kāi)始設(shè)置緩存的 chunks 
         priority: 0, // 緩存組優(yōu)先級(jí) 
         vendor: { // key 為entry中定義的 入口名稱 
             chunks: "initial", // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是async) 
             test: /react|vue/, // 正則規(guī)則驗(yàn)證，如果符合就提取 chunk 
             name: "vendor", // 要緩存的 分隔出來(lái)的 chunk 名稱 
             minSize: 30000, 
             minChunks: 1, 
         } 
     } 
}); 
 
// 添加一個(gè) minimizer 
config.optimization 
  .minimizer('css') 
  .use(OptimizeCSSAssetsPlugin, [{ cssProcessorOptions: {} }]) 
// 移除 minimizer 
config.optimization.minimizers.delete('css') 
// 修改 minimizer 插件參數(shù) 
config.optimization 
  .minimizer('css') 
  .tap(args => [...args, { cssProcessorOptions: { safe: false } }]) 

善用條件

配置之前提到過(guò)，對(duì)于ChainSet和ChainMap對(duì)象都有條件配置方法when，可以在某些很多場(chǎng)景下取代 if-else，保持配置的鏈?zhǔn)秸{(diào)用，讓代碼更加優(yōu)雅。

config.when( 
  process.env.NODE === 'production', 
  config.plugin('size').use(SizeLimitPlugin) 
) 

小結(jié)

webpack-chain作為 webpack 的流式配置方案，通過(guò)鏈?zhǔn)秸{(diào)用的方式操作配置對(duì)象，從而取代了以前手動(dòng)操作 JavaScript 對(duì)象的方式，在方便復(fù)用配置的同時(shí)，也使代碼更加優(yōu)雅，無(wú)論是從代碼質(zhì)量，還是開(kāi)發(fā)體驗(yàn)，相對(duì)于之前來(lái)說(shuō)都是不錯(cuò)的提升，推薦大家上手使用。