说明
玩转 webpack 学习笔记
Vite 构建速度快的原因
预构建使用 ESBuild (冷启动快的原因) ：https://github.com/evanw/esbuild
因为 esbuild 里面使用的是 Golang 语言去进行打包，它是静态语言
Vite 打包流程
创建构建服务
文件路径： src/node/server/index.ts
静态文件托管服务
文件路径：src/node/server/index.ts
重写模块路径
文件路径： src/node/server/index.ts
文件路径：src/node/server/serverPluginModuleRewrite.ts
对于 bare import，把模块名替换为这个模块的 entry path，并在 path 的开头补上一个 /@modules 的标识符。
如:
import React from "/@modules/@pika/react/source.development.js"
相对路径转绝对路径，方便浏览器请求。
补齐文件扩展名和经常被省略的 index.xxx
如：
import a from '/src/a/index.js'
给非 js 类型( js 类型：如 js(x)/ts(x)/vue)的文件地址加上一个叫 "import" 的 query 参数。
给 hmr 相关的请求地址添加时间戳，避免缓存。
如:
import '/src/App.jsx?t=1599124870589'
静态资源打包策略
浏览器不支持 JS 中直接写 import CSS、图片、JSON 等语法。.
webpack loader 的处理策略:
- CSS：转换成 js 的模块，执行模块会在 DOM 中创建
<style>标签并且插入CSS内容 - 图片：转换成图片路径
- JSON：转化成 js 模块,
default export = json
vue 脚本打包策略
遇到 .vue 文件
- 获取 Script 内容
- 如果有 style 就发送请求获取 style 的部分
- 发送请求获取 template 的部分
- 进行渲染
CSS 资源打包策略
- 将 CSS 源码加工成 JS 模块
- updateStyle 会通过 CSS Style Shee API 后者直接创建
<style>标签 - 将 CSS 代码插入到 DOM 中
- 如果开启了CSS Module，则直接导出成一个对象，否则导出 CSS 代码
模板打包策略
@vue/compiler-dom 编译 template，然后返回给浏览器
