前言之前也是从grunt/gulp/fis/来的，现在是webpack，中间还有一些问题没有仔细想过，比如为什么debug总要开启一个http服务，是构建工具，现在简单梳理一下最原始的构建工具无非就是这样：如果更改了某个资源文件，需要手动运行build命令进行重建。重建时，构建工具会将所有资源文件重建一次，然后合并打包。加载到最新构建的资源文件需要手动刷新页面，我们希望构建工具应该是这样的：如果你改变了某个资源文件，构建工具可以监测到这个变化并自动重建构建工具。构建工具在重建时，不会构建所有的资源文件，而是重建改变的资源文件，然后将改变的资源文件与其他资源文件合并并打包。构建完成后，你的调试页面就可以自动刷新了（当然如果能类似ajax一样不刷新加载就更好了）核心功能轻，其他功能可以通过插件扩展，比如编译coffee/typescript/tpl/sass等原理资源文件修改自动编译和监控资源修改自动编译的实现是构建工具的基本实现功能，原理是node有一个api可以监控状态单个资源文件(fs.watch)。当资源文件发生变化时，可以触发回调通知节点。这也是很多基于节点的构建工具的核心。当然，强大的node社区还有监听文件夹的node模块，比如Chokidar按需构建资源文件。构建工具监听某个资源文件的变化，重建资源文件，然后在最后的打包阶段和其他没有变化的构建。资源文件被合并并重新打包到一个aio（多合一）构建工具中。监听到某个资源文件的变化后，重新构建资源文件，然后从之前构建的aio中提取资源文件变化前的逻辑。填入变化的逻辑后，连一个包装都省了，只是逻辑实现起来比较复杂。页面自动加载新资源，方便调试。完成后，将整个文件放在服务器目录下。而在开发环境（dev）中，构建工具构建的最终页面文件，除了你的业务代码外，一般都会引入一段socket相关的代码。通过套接字，客户端可以一直与服务器保持通信。比如你build之后，通过127.0.0.1:port/index.html调试页面，你的index.html中嵌入了socket代码（当然生产环境（prod）是不会把socket函数封装进去的）。有了socket，服务端和客户端保持通信连接，服务端很容易推送客户端刷新。是的。有两种处理方式，同步刷新和异步热加载。如果服务器资源发生变化，服务器会通过socket向客户端发送一条指令，客户端socket捕获这条指令并刷新页面重新加载新的资源。.如果服务器发生变化，服务器会通过套接字向客户端发送指令。客户端socket捕获该指令，异步拉取新资源到服务端，实现异步重载，无需刷新。通过插件扩展其他功能构建工具大部分都是通过插件扩展的，就不说了
