4.2 动态构建

动态构建

• 也叫动态编译（dynamic compilation）
• java 的动态编译和前端的不一样，java动态编译最普遍的是即时编译，目的是为了提高性能
• 本地开发服务器动态编译功能目的是为了节省人力，方便调试，本质是监听和触发

webpack-dev-server

• 是官方提供的用于搭建本地开发环境的一个微型nodejs服务框架
• 有动态编译和HMR（热更新）功能
• 没有mock服务
• 是在express和webpack-dev- middleware基础上封装的
• 也可以自己封装一个服务器，把mock和其他需要的自定义功能集成进去

webpack-dev-middleware

• 是express框架的一个中间件，结合一些功能模块可以实现动态编译和热更新
• 中间件：在输入到输出过程中对内容进行加工从而输出预想的数据
• webpack-dev-middleware将webpack构建输出的文件存储在内存中，正常情况下webpack会将构建产出的文件存储在硬盘目录中
• 每当有客户端发起一个构建后文件的请求，webpack-dev-middleware就会将内存中对应的数据返回
• 是内存的文件，没有磁盘读写过程，数据更新非常快，这是webpack相较其他同类的优势

如何启动对源文件的监听并触发动态编译

• webpack-dev-middleware有两个配置，
  1 lazy 是否开启惰性配置
  -- 不会监听任何修改，只有收到客户端请求时才会重新编译
  2 watchOptions 监听细节配置
  -- 主动监听，并且重新编译
  -- 有几个配置
  aggregateTimeout：告知webpack，一段时间内，所有源代码的修改，聚合到一次重新编译。为了性能优化，避免频繁编译。默认值时300毫秒，这个值对前端调试够了。
  ignored：不参与监听的文件，比如node_modules 。可以降低cpu和内存负荷。
  poll：webpack监听无效时，指定轮询校验文件的频率，单位为毫秒。有些文件时不支持webpack监听的，定期轮询就是为了备用这种的

livereload

• 在浏览器和服务器之间创建webSocket连接，服务器端执行完编译后，发送reload事件给浏览器刷新页面
• 优点：浏览器能够即时获取构建的资源
• 缺点：无法保存页面状态，比如浏览器调试面板的css代码

HMR

• 在webpack-dev-server模式下，webpack向构建文件注入了一个功能模块 HMR Runtime，在服务器端注入了一个模块 HMR server。
• 两者就是客户端和服务器端，实现方式也是webSocket通信
• webpack的hmr流程
  1 源文件保存后，webpack监听变化，重新构建
  2 构建完成后，webpack将变动信息传递给hmr server
  3 hmr server通过websocket发送信息告知hmr runtime需要更新客户端，hmr runtime随后通过http获取要更新的模块内容
  4 hmr runtime将更新的模块替换，浏览器不会刷新
• hmr的主要目的是开发阶段的即时调试，测试环境和生产环境不需要。在webpack配置中，通过判断环境变量为‘dev’注入hmr runtime，避免在测试和生产环境产生冗余代码