来了来了，在前端工程化里，哪一块的知识是最重要的，一定是构建工具！！！ 构建工具是前端工程化的核心。
前端的构建工具有很多，但有这么一个，是如何都绕不过去的，对，就是那个，webpck。
从视觉上直观上，webpack就是把我们的业务代码，打包成目标代码，就是dist目录下的代码。
看一下一些工程化技术，其作用就是 编译。
这只是前端工程化里的一小片拼图，那我们就需要一个东西把前端工程化里的所有技术进行一个整合，这个整合的东西就是 构建工具。
在webpack里，把所有的东西都看做是一个模块，这些模块之间有他们的依赖关系，那构建工具需要把他们之间的依赖关系分析出来，把不同的模块交给不同的东西进行处理，比如把js给babel处理，最终合并打包，生成混淆兼容性更好的压缩文件，至于生成多好个，都是可以配置的，这就是所谓的分包了哈。
那为什么需要构建工具？ 本质的原因就是我们喜欢的代码和浏览器喜欢的代码不一样。
看起来多？不是看起来是本来就多，这东西不是10天半个月能搞定的，所以还是得循序渐进，持续的学习。下面就简单的介绍几个核心点。
1. 打包压缩
都知道会生成一个dist文件夹哈。比如说css，打包后的文件名是xxx.abf343.css这样的，里面的代码呢，空格、换行全部都没了。
css
.son[data-v-506de6a1]{color:var(--theme-color)}.son span[data-v-506de6a1]{color:var(--main-text)}.son button[data-v-506de6a1]{margin-left:20px}div[data-v-5cd27bc2]{color:var(--theme-color)}div span[data-v-5cd27bc2]{color:var(--main-text)}同理啊，js里的空格换行都没了，另外函数命名什么的都变了。所以说，webpack会对js和css进行打包压缩，对于js，还会对里面的各种名称进行混淆。
js
import{_,r as n,g as p,o as r,c as i,e as o,v as u,d as l,t as c}from"./index-5ca849eb.js";const v={class:"value"},f={__name:"index",setup(x){const t=n(""),a=n(""),d=p(()=>t.value+" "+a.value);return(m,e)=>(r(),i("div",null,[o(l("input",{type:"text","onUpdate:modelValue":e[0]||(e[0]=s=>t.value=s)},null,512),[[u,t.value]]),o(l("input",{type:"text","onUpdate:modelValue":e[1]||(e[1]=s=>a.value=s)},null,512),[[u,a.value]]),l("span",v,"计算后的值："+c(d.value),1)]))}},V=_(f,[["__scopeId","data-v-037d9ffa"]]);export{V as default};混淆的作用是进一步压缩代码体积，也是为了防止别人更改。
2. 文件指纹
打包完成后，文件名多了一些奇奇怪怪的文字，如：js/app-ab42.js，其中ab42这样的字符被称做hash，它会随着模块的内容变化而变化。
源码的内容不变，hash不变；源码的内容发生改变，hash改变。
之所以这么做，是因为生产环境中，浏览器会对除页面之外的静态资源进行缓存。如果不设置hash值，一旦代码更新，浏览器还会使用以前缓存的结果，无法使用最新的代码。
3. 开发服务器
这个使用框架后经常使用了。开发服务器就是在本地启动一个服务器，通常使用一个命令将其启动起来，这个命令的全写是webpack serve，在package.json里配置了之后，就可以 npm run serve启动了，是不是，熟不熟，这应该是最熟的命令了吧，感觉比git add .还要熟。
这下开发过程中，我需要一个页面，需要一个js，开发服务器会在内容中完成打包，然后从内存里把打包结果拿出来。当我们去修改源码的时候，页面就会更新，有没有？是不是那个热更新，这是因为webpack会监听我们的源码目录，当我们源码发生变化的时候，webpack会做两件事：1.重新打包；2.去刷新浏览器页面。（tip:嘿说到这，之前项目的热更新失效了，报错，就是报了热更新的错，找了好久都没有解决方案，后面闲下来去对比以前的依赖，才发现是装了某个依赖后才报错的，麻了😑😑😑）
害，前端工程化的东西太多了！！！