webpack4.0各个击破(9)——业力篇

Webpack4.0中级教程

　　

<代码> webpack> 最重要的部分强,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过<强>问题+解决方式强劲的模式,以前端构建中遇到的具体需求为出发点,学习<代码> webpack> webpack4.0版本> 　　 　　

　　

　　

一。webpack与自动化测试

　　

<代码> webpack> webpack 之所以关联自动化测试,是因为<强>它能够为测试脚本提供模块管理的能力强,本质上来讲,是将<代码> webpack> webpack> 　　

对于<代码> 业力+ <代码>摩卡> 茶> karma-webpack> 　　

二。karma-webpack

　　

插件地址:https://github.com/webpack-contrib/karma-webpack

　　

2.1自动化单元测试库简介

　　

先对基本的单元测试工具做一个简要说明:

　　

　　<李> <代码> 业力测试框架,提供多浏览器环境跑单元测试的能力,包括<代码>无头浏览器。 　　<李> <代码>摩卡> karma-mocha> 中业力。 　　<李> <代码>茶断言库,支持 , , 断言不同类型的断言测试函数,可使用<代码> karma-chai> 中业力。 　　

　　

大部分单元测试都是基于上述三个库联合使用而展开的。<代码> Karma-webpack 主要提供的能力,是为<代码> 中业力加载的测试脚本提供模块化加载的能力。

　　

2.2基本使用

　　

使用<代码>纱添加karma-webpack - d 进行安装,<代码> karma.conf.js> 　　

 <代码类=" language-js ">模块。出口=(配置)=比;{
　　config.set ({
　　
　　文件:[//针对测试目录下所有符合命名规范的测试文件
　　{/* _t模式:“测试。js”,看着:假},
　　{模式:“测试/* */* _t。js”,看着:假}
　　),
　　
　　预处理器:{//为选定脚本指定前处理器,这里配置所有的测试脚本需要经过webpack处理/* _t”测试。js: [' webpack '),
　　“测试/* */* _t。js”(“webpack”):
　　}，
　　
　　webpack: {//webpack配置,针对测试脚本打包的编译配置,与项目文件打包不相关//也可以引入独立的配置文件
　　}，
　　
　　webpackMiddleware: {//如果使用了webpack-dev-server则可以传入一些参数
　　统计数据:‘错误’
　　}
　　})
　　} 

　　

这种配置中<代码> webpack> ,也就是说它只会处理局部的依赖管理,这样做的优点是可以针对部分测试脚本单独跑单元测试,但劣势也很明显,就是当测试脚本数量很大且需要默认跑所有的测试用例的场景下(例如自动化流水线上自动触发的图象测试中)效率相对较低。

　　

2.3默认跑完全部测试用例的场景

　　

针对上面的问题,<代码> webpak> 入口点> bundle.js 文件,它的优势和劣势和基本场景正好是相反的。

　　

这种场景下,<代码> karma.conf.js> 　　

 <代码类=" language-js ">文件:[//>//这个配置针对的是测试/* */? _test.js格式的脚本文件
　　const testsContext=require.context (”。”,的确,/_t/美元);
　　testsContext.keys () .forEach (testsContext)  

　　

三。测试报告

webpack4.0各个击破(9)——业力篇