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

海倫網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

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

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

• 生態(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 來構(gòu)建，經(jīng)過這么多年業(yè)界的驗(yàn)證，該踩的坑也都踩的差不多了。

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

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

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

webpack-chain 核心概念

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

什么是 ChainMap ?

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

 
 
 

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

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

接下來就來一個(gè)個(gè)認(rèn)識這些方法:

 
 
 

  
  
  
// 清空當(dāng)前 Map 的所有屬性 
  
  
  
clear() 
  
  
  
// 通過鍵值從 Map 移除單個(gè)配置. 
  
  
  
delete(key) 
  
  
  
// Map中是否存在一個(gè)配置值的特定鍵，返回真或假 
  
  
  
has(key) 
  
  
  
// 返回 Map中已存儲的所有值的數(shù)組 
  
  
  
values() 
  
  
  
//  提供一個(gè)對象，這個(gè)對象的屬性和值將映射進(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，如果找不到對應(yīng)的值, 就返回 fn 函數(shù)返回的結(jié)果 
  
  
  
getOrCompute(key, fn) 
  
  
  
// 配置鍵值對 
  
  
  
set(key, value) 
 
 
 

這些方法的返回對象也都是 ChainMap，這樣可以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，簡化操作。在 Webpack中，大部分的對象都是 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) 
  
  
  
// 在開始位置增加一個(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í)，通過調(diào)用ChainSet的方法即可完成。

速記方法

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

 
 
 

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

因此，在實(shí)際的webpack-chain配置中，可以經(jīng)?？吹街苯?.屬性()這樣調(diào)用方式，是不是感覺很巧妙?源碼當(dāng)中的實(shí)現(xià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ù)直接傳入，然后通過下面一行代碼間接調(diào)用 set 方法:

 
 
 

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

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

配置 Webpack

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

 
 
 

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

然后依次配置 resolve、entry、output、module、plugins、optimization 對象，本文關(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

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

 
 
 

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

plugins

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

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

 
 
 

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

舉個(gè)例子:

 
 
 

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

2. 移除插件

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

 
 
 

  
  
  
config.plugins.delete('extract') 
 
 
 

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

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

 
 
 

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

通過 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 來動(dòng)態(tài)修改插件的傳參，舉個(gè)例子:

 
 
 

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

5. 修改插件初始化過程

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

 
 
 

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

loader

loader 是 Webpack 中必不可少的一個(gè)配置，下面我們來看看 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ù)

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

 
 
 

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

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

3. 移除一個(gè) loader

 
 
 

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

optimization

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

這里以其中的 splitChunks 和 minimizer 為例來配置一下:

 
 
 

  
  
  
config.optimization.splitChunks({ 
  
  
  
     chunks: "async", 
  
  
  
     minChunks: 1, // 最小 chunk ，默認(rèn)1 
  
  
  
     maxAsyncRequests: 5, // 最大異步請求數(shù)， 默認(rèn)5 
  
  
  
     maxInitialRequests : 3, // 最大初始化請求數(shù)，默認(rèn)3 
  
  
  
     cacheGroups:{ // 這里開始設(shè)置緩存的 chunks 
  
  
  
         priority: 0, // 緩存組優(yōu)先級 
  
  
  
         vendor: { // key 為entry中定義的 入口名稱 
  
  
  
             chunks: "initial", // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是async) 
  
  
  
             test: /react|vue/, // 正則規(guī)則驗(yàn)證，如果符合就提取 chunk 
  
  
  
             name: "vendor", // 要緩存的 分隔出來的 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 } }]) 
 
 
 

善用條件

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

 
 
 

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

小結(jié)

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

網(wǎng)頁標(biāo)題：我曾為配置Webpack感到痛不欲生，直到我遇到了這個(gè)流式配置方案
瀏覽地址：http://uogjgqi.cn/article/ccoescc.html