前文都是对代码级别的转换，下面是工程级别的转换
开发和维护的代码 jsx、sass
和运行时需要的代码
不一致
所以需要转换，做转换的工具就叫做构建工具
打包之后的代码就完全脱离了开发环境
- 哪种工程更适合开发和维护
- 哪种工程更适合运行
- 如何转换（打包）
构建工具就是解决上述三个问题
市面上的构建工具有以下这些：
webpack、rollup、esbuild、turbopack、snowpack、grunt、gulp、rspack
webpack 依然是最主流的，下文将进行介绍
构建工具：webpack
webpack怎么认为上面三个问题呢
-
哪种工程更适合开发和维护
- 一切皆为模块
-
哪种工程更适合运行
- 传统工程
-
如何转换（打包）
-
- 通过入口去找依赖关系图，然后打包合并
-
1.入口
- AST（抽象语法树）
- 导入语句
- 同时支持 ESM、CMJ
- import、require
- 模块查找
-
比如给一个文件夹，会找文件夹中的 index.js
-
如果没有给./ ../之类的就会去找 node 的模块查找规则，就是看看当前目录有没有 node_modules，没有就一直往上一级找
-
- 比如上例就会去 node_modules 目录里面去找 jquery，再找到目录下面的 package.json，找到 main 字段再进去找
-
-
@就是别名，可以配置，在 webpack.config.js 中
-
- 导入语句
2.开发服务器
- 就像我们经常用的 npm run server
- 也就是我们在运行命令 webpack serve 时，会启动一个开发服务器
- 像我们常用的 live server 就是开发服务器
- webpack 里面内置了一个库，webpack-dev-server，而这个库里面依赖了 express
我们运行 webpack-serve 的时候就会利用这一套工具，来启动一个开发服务器，与此同时它会进行打包，相当于帮我们运行了 npm run build，只是这一次打包是在内存里面完成，并不会把打包结果形成文件，文件是存储数据的介质，不放文件放内存也可以，内存里面也可以存数据，内存中会形成打包结果，然后就是在控制台中给我们提示，提示我们访问的地址，比如8080，点击后此时就由浏览器访问我们的开发服务器了
- 浏览器会向开发服务器发送请求
- 开发服务器就可以从打包结果中去拿到一个页面
- 把页面响应给浏览器
- 浏览器就会渲染页面，渲染过程继续请求 js、css
- 开发服务器又继续从打包结果中去那相应的 js、css
这就解决了我们手动打包，手动运行浏览器的过程
除此之外，还能实现源码变化后刷新的功能
那么浏览器怎么知道刷新呢，这就涉及到 websocket\HMR
3.文件指纹
比如这个打包结果，这就涉及到哈希值了
打过过程中文件内容的变化，会影响到这个文件指纹
换句话说：文件内容不变，这一块就不会变
文件指纹是在 webpack 里面进行配置的，可以不产生指纹，但一般情况下我们都希望他产生指纹
如果不使用指纹会出现这种情况
- 浏览器看到这个 js 会向服务器去请求 js，像 js、css 服务器一般会加入缓存，让浏览器缓存起来，期限一般很久
- 那浏览器下次再遇到这个 js 就会从缓存中取，此时服务器更新了内容浏览器就不知道，会产生问题
使用文件指纹就不一样了：
- 页面中引入12345这个 js，服务器给了，因为带了文件指纹，就能让浏览器缓存很久3、5百年也行
- 然后再用到这个 js 的时候就会使用缓存了
- 有一天服务器更新代码，重新打包后文件指纹就变了
- 页面变了之后页面的 js、css也会跟着变
- 像页面（也就是html）一般是不加入缓存的
- 页面的路径变成了一个新的文件，由于 a123b.js 在浏览器是没有缓存的，路径变了缓存就无法命中，因此就必须请求新的文件
- 缓存一般是和请求路径相互绑定的
- 然后对新的文件再进行缓存
4.css modules
为了避免类名冲突，打包结果里面的类名全都变化了
这样，源码里面的类名和打包结果的类名就对应起来了
5.源码地图
就是打包文件里的 .map 文件
它是用于将运行的代码和源代码对应起来的，否则难以调试、打断点
这里面就是源码了
小结
webpack是通过两个扩展点
一个是 loader
一个是 plugin
加载器和插件，通过这两个点可以把代码转换工具全部融合
脚手架
常用的有：
vue-cli
vite
cra
umijs
脚手架有两个功能
- 提供界面和交互
- 提供工程模板
提供界面和交互也就是我们平时安装脚手架的时候，在终端中出现的对话，比如
npm install -g @vue/cli
安装完之后就可以搭建项目了
vue create my-vue-project
就可以开始选择了
项目创建完之后就可以使用脚手架提供的工程模板了
END
本文主要对构建工具和脚手架进行简要介绍，首先明确了构建工具的作用，因为开发和维护的代码和运行时的代码是不一致，需要构建工具来进行转换，而且这个转换是工程级别的转换；然后介绍了主流构建工具 webpack,介绍了 webpack 的入口、开发服务器、文件指纹、css modules以及源码地图；最后简单介绍了脚手架
