一文大白话讲清楚webpack进阶——5——dev-server原理及其作用

文章目录

  • 一文大白话讲清楚webpack进阶——5——dev-server原理及其作用
  • 1. webpack的作用
  • 2. dev-server的作用
  • 3. dev-server的原理
    • 3.1 啥是webpack-dev-middleware
    • 3.2 HMR

一文大白话讲清楚webpack进阶——5——dev-server原理及其作用

1. webpack的作用

  • webpack的作用我们之前见过了,不懂的可以看起系列文章
  • 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建一直到一文大白话讲清楚webpack基本使用——18——HappyPack
  • 一言概之,webpack就是把我们项目中的各个模块(js Module,css等都视为模块)进行打包
  • 那具体怎么打包的呢
  • 通过AST

2. dev-server的作用

  • 开开发阶段,我们想要预览页面效果,就需要启动一个一个服务器伺服编译出来的静态资源,帮助我们实现自动打包,自动刷新等,提高开发效率,webpack-dev-server就是干这个的活

3. dev-server的原理

  • webpack-dev-server基于express框架构建了一个HTTP服务,通过webpack-dev-middleware和memory-fs模块将打包资源输出到内存中去,当浏览器请求文件吃,webpack-dec-server会监视这些请求,并将他们路由到内存中的虚拟文件系统中对应的文件,这样就可以直接从内存中提供文件,而不需要访问实际的物理文件。

3.1 啥是webpack-dev-middleware

  • webpack-dev-middleware是一个wrapper,理解为容器,他会将webpack编译后的文件存储到内存中去,然后用户在访问express服务器时,将内存中对应的资源输出返回。
  • 可以把它看成是一个内存型的文件系统,目录与内存中的产物会形成映射关系
  • 当我们访问express时,express会将请求转发给webpack-dev-middleware,webpack-dev-middleware会根据映射关系,找到对应的文件,再讲文件内容返回给express

3.2 HMR

  • 为我们提供无须刷新就可以实施看到页面效果的动态服务,本质是websocket通信
  • 看我这篇文章
  • 一文大白话讲清楚webpack基本使用——6——热更新及其原理

你可能感兴趣的:(webpack,webpack,前端,node.js)