webpack
打包
runCLI //webpack命令实际执行的是webpack-cli中的cli.js，先处理子命令和命令参数，处理完后执行runWebpackrunWebpack // build子命令对应的函数createCompilerloadConfig//通过require加载并执行配置，比如当前目录的webpack.config.js，返回导出的配置对象，这一步会执行插件的构造函数buildConfig//处理配置，比如根据环境变量来设置modewebpack//调用webpack.js中的函数createCompiler //创建Compiler对象，执行environment、initialize钩子compiler.run或compiler.watch //如果需要监视，执行后者，否则前者执行单次打包compiler.hooks.beforeCompile.callAsync //调用beforeCompile的同步和异步钩子compiler.hooks.compile compiler.hooks.makecompiler.hooks.finishMakecompilation.finish
热模更新
- 当执行webpack serve命令时，会启动dev server，其中启动了websocket server，并且创建热模更新插件HotModuleReplacementPlugin，它的apply方法会注册complitation.processAssets钩子。
- 当监听的代码文件变更时，触发重构建，构建时触发processAssets钩子，它会比较每个模块的新旧hash值，如果存在不同的，生成.hot-update.json，用于保存变更的chunkId；对于变更的每个chunk，生成.hot-update.js，用于保存chunk中发生变更的模块
- 生成json和js后，websocket server向浏览器发送hash消息，用于将全局hash发给浏览器；发送ok消息，用于触发浏览器执行reloadApp
- 浏览器执行reloadApp：通过events.js库发送webpackHotUpdate事件，dev-server.js接受到该事件后，执行hot check，先根据hash值拉取.hot-update.json文件，根据其中的chunkId，动态创建script标签，通过src拉取和执行js文件
- .hot-update.js中，调用webpack运行时函数self["webpackHotUpdateloader_demo"]，将模块工厂保存起来。js文件全部加载完后，执行hot apply，(internalApply)，也就是执行模块工厂，执行变更后的模块代码，将模块的导出加到全局缓存
- js文件默认不支持HMR，会回退到liveReload，也就是全页刷新。需要通过module.hot.accept手动实现HMR，该函数将模块id加到可接受列表，当模块工厂加载后，会从当前模块开始，向父级模块递归检查可接受列表中是否包含了该模块，如果包含，从定义了module.hot.accept的父级模块为根，hot apply整个依赖子树。
- css等样式文件支持HMR，因为css生成的模块js代码中，会插入module.hot.accept
console.log("main.js12345678")if (module.hot) {module.hot.accept(() => {//第1个参数不是模块名称时，表示当前模块是自接受的，模块工厂加载后，只会更新单个模块，无级联更新// 重新执行或者渲染逻辑console.log("accept './main.js'。。。。。。")});
}vue-cli
- 执行vue-cli-service命令时，由Service.js处理，它使用插件实现子命令的实现（./commands/）和webpack默认配置(./config/)，默认配置包括默认入口文件、输出路径、默认loader、VueLoaderPlugin
'./commands/serve', //处理serve子命令
'./commands/build',
'./commands/inspect',
'./commands/help',
// config plugins are order sensitive
'./config/base', //插入webpack默认配置
'./config/assets',
'./config/css',
'./config/prod',
'./config/app'
- Service.run执行时，使用默认配置创建webpack的compiler，创建开发服务器并启动，启动时触发VueLoaderPlugin注册的compile事件，它负责添加vue相关的loader，并且将原始的js、css loader增加resourceQuery属性，从而支持根据导入的查询串来匹配加载器
- 入口文件导入.vue组件文件时，会触发vue-loader，它将.vue文件改写为多条import语句，通过查询串导入template、css、style，webpack在解析带查询串的import时，会调用加载器规则的resourceQuery来匹配加载器，从而将.vue分成多个部分，使用不同的加载器处理它们
import { render } from "./App.vue?vue&type=template&id=7ba5bd90"
import script from "./App.vue?vue&type=script&lang=js"
import "./App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css"
- VueLoaderPlugin改写后的加载器中，其中有1个pitcher，根据import查询串的type属性，返回不同的代理模块，换句话说，返回1个export+内联loader语句，从而根据不同type，调用不同的loader，并将结果导出为模块
export { default } from "-!../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./App.vue?vue&type=script&lang=js"export * from "-!../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./App.vue?vue&type=template&id=7ba5bd90"
vite
构建工具作用：
- 转换ts成js, vue转换成render函数
- 模块开发支持，浏览器只支持import "具体路径"，不支持import "模块名称"
- 压缩文件，代码分割
vite的优势：
- 只支持es modules，即import xx from "xx"的写法，更关注浏览器项目的构建；而webback更关注兼容性，浏览器和服务端的项目，支持es modules和require的写法。
- webpack需要将整个项目依赖解析完再开启开发服务器，vite按需加载依赖，开发服务器启动速度更快
yarn create vite做了什么
- 全局安装create-vite(vite脚手架)，yarn xx yy会安装xx-yy
- 运行create-vite bin目录下的一个执行配 置
- create-vite内置了vite，就好像vue-cli内置了webpack
- create-vite提供了一套项目模板，做好了最佳实践的配置，下载好了vite,vue,babel。vite是构建工具，create-vite是脚手架。
- type="module", 开启es6模块化特性，可以使用import
开发服务器
- 没有“入口文件”概念：Vite 的开发服务器并不像webpack那样在启动时就指定一个单一的入口 JS 文件。浏览器发起对某个 HTML 的请求时，才会把它当作“入口”去解析
- node:http → middleware中间件：Vite 在内部用 node:http创建了一个原生的 HTTP 服务，注册了一个顶层回调
createServer(middlewares).listen(port);//这个 middlewares 类似于web过滤器，你可以通过 middlewares.use(fn) 插入各种处理逻辑
- HTML 处理钩子（devHtmlHook）：当请求路径看起来指向一个 HTML（或目录），且没有被静态文件命中时，就会落到这个钩子里，查找