一. webpack与自动化测试
webpack对应的关键词是模块化，它的次要工作就是打包和治理模块，所以首先须要明确的概念就是webpack之所以关联自动化测试，是因为它可能为测试脚本提供模块治理的能力，实质上来讲，是将webpack的打包性能嵌入了自动化测试框架，而不是将自动化测试框架作为插件集成进了webpack，了解这个区别是十分要害的。
对于Karma+Mocha+Chai及其他自动化测试相干工具的话题将在《大前端的自动化工厂》系列博文中讲述，本篇次要介绍karma-webpack连接件，它从工具实现层面上将自动化测试与自动化构建分割在了一起。
二. karma-webpack
插件地址：https://github.com/webpack-contrib/karma-webpack
2.1 自动化单元测试库简介
先对根本的单元测试工具做一个简要阐明：
Karma测试框架，提供多浏览器环境跑单元测试的能力，包含headless浏览器。Mocha测试框架，提供兼容浏览器和Node环境的单元测试能力，可应用karma-mocha集成进Karma中。Chai断言库，反对should,expect,assert不同类型的断言测试函数，可应用karma-chai集成进Karma中。
大部分单元测试都是基于上述三个库联结应用而开展的。Karma-webpack次要提供的能力，是为Karma中加载的测试脚本提供模块化加载的能力。
2.2 根本应用
应用yarn add karma-webpack -D进行装置，karma.conf.js配置文件如下：
module.exports = (config) => { config.set({ files: [ // 针对test目录下所有合乎命名标准的测试文件 { pattern: 'test/*_test.js', watched: false }, { pattern: 'test/**/*_test.js', watched: false } ], preprocessors: { // 为选定脚本指定前处理器，这里配置所有的测试脚本须要通过webpack解决 'test/*_test.js': [ 'webpack' ], 'test/**/*_test.js': [ 'webpack' ] }, webpack: { // webpack配置，针对测试脚本打包的compilation配置，与我的项目文件打包不相干 // 也能够引入独立的配置文件 }, webpackMiddleware: { //如果应用了webpack-dev-server则能够传入一些参数 stats: 'errors-only' } })}这种配置中webpack会将每一个命中的文件当做是一个entry，也就是说它只会解决部分的依赖治理，这样做的长处是能够针对局部测试脚本独自跑单元测试，但劣势也很显著，就是当测试脚本数量很大且须要默认跑所有的测试用例的场景下（例如自动化流水线上主动触发的LLT测试中）效率绝对较低。
2.3 默认跑齐全部测试用例的场景
针对下面的问题，webpak提供了另一种可选的解决测试脚本集的办法，很容易设想，其实就是本人新建一个entryPoint,将要跑的测试脚本全副引入，打包成一个bundle.js文件，它的劣势和劣势和根本场景正好是相同的。
这种场景下，karma.conf.js的配置只须要针对入口文件即可：
files: [ // only specify one entry point // and require all tests in there 'test/index_test.js'],preprocessors: { // add webpack as preprocessor 'test/index_test.js': [ 'webpack' ]},而后在测试文件的根目录下新建一个入口脚本index_test.js:
// 这个配置针对的是test/**/?_test.js格局的脚本文件const testsContext = require.context(".", true, /_test$/)；testsContext.keys().forEach(testsContext)三. 测试报告
个别跑完单元测试，都须要输入一份指定格局的报告，用于过后自查或问题追溯，此处须要留神的是当与webpack4.0联合应用时，karma的一些默认行为会生效（例如在控制台输入单元测试用例和后果汇总，以及karma独立运行时用来生成代码覆盖率报告插件karma-coverage也无奈失常工作），在此均须要重新配置。
- 单元测试报告
单元测试信息无奈输入的问题，能够显式援用插件
karma-spec-reporter或karma-mocha-reporter并进行根本的配置即可。 - 代码覆盖率报告
代码覆盖率报告的主动生成配置较为简单，须要依赖前端代码覆盖率工具
istanbul并联合若干插件能力实现。低版本的webpack能够参考karma-webpack-example这个开源我的项目的示例进行配置。webpack4.0以上版本能够参考下文举荐的示例。单元测试后果：
覆盖率报告：
四. 配置参考
笔者提供了针对webpack4.0 + karma的自动化测试配置示例，放在了Webpack4-Karma-Mocha-Chai-Demo，有须要的小伙伴能够自行查看。