基础-构建工具

来了来了,在前端工程化里,哪一块的知识是最重要的,一定是构建工具!!! 构建工具是前端工程化的核心。

前端的构建工具有很多,但有这么一个,是如何都绕不过去的,对,就是那个,webpck

从视觉上直观上,webpack就是把我们的业务代码,打包成目标代码,就是dist目录下的代码。

看一下一些工程化技术,其作用就是 编译

这只是前端工程化里的一小片拼图,那我们就需要一个东西把前端工程化里的所有技术进行一个整合,这个整合的东西就是 构建工具

在webpack里,把所有的东西都看做是一个模块,这些模块之间有他们的依赖关系,那构建工具需要把他们之间的依赖关系分析出来,把不同的模块交给不同的东西进行处理,比如把jsbabel处理,最终合并打包,生成混淆兼容性更好的压缩文件,至于生成多好个,都是可以配置的,这就是所谓的分包了哈。

那为什么需要构建工具? 本质的原因就是我们喜欢的代码和浏览器喜欢的代码不一样。

看起来多?不是看起来是本来就多,这东西不是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会对jscss进行打包压缩,对于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:嘿说到这,之前项目的热更新失效了,报错,就是报了热更新的错,找了好久都没有解决方案,后面闲下来去对比以前的依赖,才发现是装了某个依赖后才报错的,麻了😑😑😑)

害,前端工程化的东西太多了!!!

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法