<code>webpack</code>作為前端最火的建構工具，是前端自動化工具鍊最重要的部分，使用門檻較高。本系列是筆者自己的學習記錄，比較基礎，希望通過問題 + 解決方式的模式，以前端建構中遇到的具體需求為出發點，學習<code>webpack</code>工具中相應的處理辦法。（本篇中的參數配置及使用方式均基于<code>webpack4.0版本</code>）
<code>webpack</code>對應的關鍵詞是子產品化，它的主要任務就是打包和管理子產品，是以首先需要明确的概念就是<code>webpack</code>之是以關聯自動化測試，是因為它能夠為測試腳本提供子產品管理的能力，本質上來講，是将<code>webpack</code>的打包功能嵌入了自動化測試架構，而不是将自動化測試架構作為插件內建進了<code>webpack</code>，了解這個差別是非常關鍵的。
對于<code>karma</code>+<code>mocha</code>+<code>chai</code>及其他自動化測試相關工具的話題将在《大前端的自動化工廠》系列博文中講述，本篇主要介紹<code>karma-webpack</code>連接配接件，它從工具實作層面上将自動化測試與自動化建構聯系在了一起。
插件位址：https://github.com/webpack-contrib/karma-webpack
先對基本的單元測試工具做一個簡要說明：
<code>karma</code> 測試架構，提供多浏覽器環境跑單元測試的能力，包括<code>headless</code>浏覽器。
<code>mocha</code> 測試架構，提供相容浏覽器和node環境的單元測試能力，可使用<code>karma-mocha</code>內建進<code>karma</code>中。
<code>chai</code> 斷言庫，支援should,expect,assert不同類型的斷言測試函數，可使用<code>karma-chai</code>內建進<code>karma</code>中。
大部分單元測試都是基于上述三個庫聯合使用而展開的。<code>karma-webpack</code>主要提供的能力，是為<code>karma</code>中加載的測試腳本提供子產品化加載的能力。
使用<code>yarn add karma-webpack -d</code>進行安裝，<code>karma.conf.js</code>配置檔案如下：
這種配置中<code>webpack</code>會将每一個命中的檔案當做是一個<code>entry</code>，也就是說它隻會處理局部的依賴管理，這樣做的優點是可以針對部分測試腳本單獨跑單元測試，但劣勢也很明顯，就是當測試腳本數量很大且需要預設跑所有的測試用例的場景下（例如自動化流水線上自動觸發的llt測試中）效率相對較低。
針對上面的問題，<code>webpak</code>提供了另一種可選的處理測試腳本集的方法，很容易想象，其實就是自己建立一個<code>entrypoint</code>,将要跑的測試腳本全部引入，打包成一個<code>bundle.js</code>檔案，它的優勢和劣勢和基本場景正好是相反的。
這種場景下，<code>karma.conf.js</code>的配置隻需要針對入口檔案即可：
然後在測試檔案的根目錄下建立一個入口腳本<code>index_test.js</code>:
一般跑完單元測試，都需要輸出一份指定格式的報告，用于過後自查或問題追溯，此處需要注意的是當與<code>webpack4.0</code>結合使用時，<code>karma</code>的一些預設行為會失效（例如在控制台輸出單元測試用例和結果彙總，以及<code>karma</code>獨立運作時用來生成代碼覆寫率報告插件<code>karma-coverage</code>也無法正常工作），在此均需要重新配置。
單元測試報告
單元測試資訊無法輸出的問題，可以顯式引用插件<code>karma-spec-reporter</code>或<code>karma-mocha-reporter</code>并進行基本的配置即可。
代碼覆寫率報告
代碼覆寫率報告的自動生成配置較為複雜，需要依賴前端代碼覆寫率工具<code>istanbul</code>并結合若幹插件才能實作。低版本的<code>webpack</code>可以參考karma-webpack-example這個開源項目的示例進行配置。<code>webpack4.0</code>以上版本可以參考下文推薦的示例。
單元測試結果：
覆寫率報告：
筆者提供了針對<code>webpack4.0 + karma</code>的自動化測試配置示例，放在了webpack4-karma-mocha-chai-demo，有需要的小夥伴可以自行檢視，如果對你有幫助，不要忘記給個star哦~