详解webpack-dev-middleware源码解读

　　

　　

Webpack的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务,大家只需在Webpack的配置中,增加devServer的配置来启动.devServer配置的本质是webpack-dev-server这个包提供的功能,而webpack-dev-middleware则是这个包的底层依赖。

　　

截至本文发表前,webpack-dev-middleware的最新版本为<代码> webpack-dev-middleware@3.7.2> 　　


　　

　　

要回答这个问题,我们先来看看如何使用这个包:

　　 　　 　　const wdm=要求(“webpack-dev-middleware”); 　　const表达=要求(“表达”); 　　const webpack=要求(“webpack”); 　　const webpackConf=要求('/webapck.conf.js。'); 　　const编译器=webpack (webpackConf); 　　const应用=表达(); 　　app.use (wdm(编译器)); 　　app.listen (8080); 　　之前 　　 　　

通过启动一个表达服务,将波分复用(编译器)的结果通过app.use方法注册为表达服务的中间函数。从这里,我们不难看出wdm(编译器)的执行结果返回的是一个表达的中间件。它作为一个容器,将webpack编译后的文件存储到内存中,然后在用户访问快递服务时,将内存中对应的资源输出返回。

　　

　　

熟悉webpack的同学都知道,webpack可以通过观看模式方式启动,那为何我们不直接使用此方式来监听资源变化呢?答案就是,webpack的观看模式虽然能监听文件的变更,并且自动打包,但是每次打包后的结果将会存储到本地硬盘中,而IO操作是非常耗资源时间的,无法满足本地开发调试需求。

　　

而webpack-dev-middleware拥有以下几点特性:

　　
    　　<李>以观看模式启动webpack,监听的资源一旦发生变更,便会自动编译,生产最新包的李 　　<李>在编译期间,停止提供旧版的包并且将请求延迟到最新的编译结果完成之后李 　　<李> webpack编译后的资源会存储在内存中,当用户请求资源时,直接于内存中查找对应资源,减少去硬盘中查找的IO操作耗时李 　　
　　

本文将主要围绕这三个特性和主流程逻辑进行分析。

　　


　　

　　

让我们先来看下webpack-dev-middleware的源码目录:

　　 　　 　　… 　　├──自由 　　│├──DevMiddlewareError.js 　　│├──index.js 　　│├──middleware.js 　　│└──跑龙套 　　│├──getFilenameFromUrl.js 　　│├──handleRangeHeaders.js 　　│├──index.js 　　│├──ready.js 　　│├──reporter.js 　　│├──setupHooks.js 　　│├──setupLogger.js 　　│├──setupOutputFileSystem.js 　　│├──setupRebuild.js 　　│└──setupWriteToDisk.js 　　├──package.json 　　… 　　 　　

其中自由目录下为源代码,一眼望去有近10多个文件要解读。但刨除跑龙套工具集合目录,其核心源码文件其实只有两个index.js, middleware.js

　　

下面我们就来分析核心文件索引。js、中间件。js的源码实现

　　


　　

　　

从上文我们已经得知wdm(编译器)返回的是一个表达中间件,所以入口文件索引。js则为一个中间件的容器包装函数。它接收两个参数,一个为webpack的编译器,另一个为配置对象,经过一系列的处理,最后返回一个中间件函数。下面我将对索引。js中的核心代码进行讲解:

　　 　　 　　… 　　setupHooks(上下文); 　　…//开始观看 　　上下文。看=compiler.watch(选项。watchOptions (err)=比;{ 　　如果(err) { 　　context.log.error(犯错。堆栈| |犯错); 　　如果(err.details) { 　　context.log.error (err.details); 　　} 　　} 　　}）; 　　… 　　setupOutputFileSystem(编译器、上下文); 　　之前 　　 　　

索引。js最为核心的是以上3个部分的执行,分别完成了我们上文提到的两点特性:

　　
    　　<李>以监控的方式启动webpack李 　　<李>将webpack的编译内容,输出至内存中李 　　
　　


　　

　　

此函数的作用是在编译器的无效的,运行,完成,watchRun这4个编译生命周期上,注册对应的处理方法

　　 　　 　　context.compiler.hooks.invalid.tap (WebpackDevMiddleware,无效); 　　context.compiler.hooks.run.tap (WebpackDevMiddleware,无效); 　　context.compiler.hooks.done.tap (“WebpackDevMiddleware”,完成); 　　context.compiler.hooks.watchRun.tap ( 　　“WebpackDevMiddleware”, 　　(回调,comp)=比;{ 　　无效(回调); 　　} 　　）； 　　

详解webpack-dev-middleware源码解读