webpack

本文详细介绍了webpack的定义、构建流程、Loader与Plugin的区别,以及webpack的热更新原理。此外,还探讨了如何利用webpack优化前端性能,包括代码压缩、CDN加速、Tree Shaking和提取公共代码等策略。
摘要由CSDN通过智能技术生成

1.webpack是什么?

webpack是一个前端资源加载/打包工具,他根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生产对应的静态资源

可以将多种静态资源js、css、less转换成一个静态文件,减少页面的的请求

进行重新夹杂编译,实际就是讲浏览器不认识的语法编译成浏览器认识的语法,比如:将less编译成css,ES6转成ES5等

减少io请求,通常我们请求,会返回一个HTML到浏览器,,就会发现在HTML页面通过script,link等标签引用的静态资源,浏览器会再次发出请求获取这些资源,但是webpack的打包,将所有的静态资源都合并好了,减少io请求

2.webpack的构建流程是什么?

webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

  1. 初始化参数:从配置文件和Shell语句中读取与合并参数,得出最终参数
  2. 开始编译:用上一步得到的参数初始化Compiler对象,加载所有配置的插件,执行对象的run方法开始执行编译
  3. 确认入口:根据配置中的entry找到所有的入口文件
  4. 编译模块:从入口文件出发,调用所有配置的Loader对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
  5. 完成模块编译:在经过以上使用Loader翻译完成所有模块后,得到了每个模块被翻译后的最终内容以及他们之间的依赖关系
  6. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的chunk,再把每个chunk转换成
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值