【面试题】webpack的五大核心、构建流程、性能优化

【面试题】webpack的五大核心、webpack的构建流程、webpack的性能优化

  • webpack是什么?
  • webpack的五大核心
  • webpack的构建流程
  • webpack性能优化

webpack是什么?

js静态模块打包工具。
功能

  • 将多个文件打包成更小的文件,(压缩)
  • 翻译 babal-loader es6进行降级兼容。

webpack的五大核心

  • enter 1/n
  • output
  • loader
  • plugins
  • mode

webpack的构建流程

1、初始化参数:从配置文件和 Shell语句中读取与合并参数,得出最终的参数
2、开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译
3、确定入口:根据配置中的 entry 找出所有的入口文件
4、编译模块:从入口文件出发,调用所有配置的Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5、完成模块编译:在经过第4步使上oader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6、输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
7、输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统,在以上过程中,webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用Webpack 提供的 API 改变 Webpack 的运行结果

这道题基本会问在Webpack性能优化之前。

webpack性能优化

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/512874.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS—开启AOT编译模式

AOT(Ahead Of Time)即提前编译,能够在Host端(即运行DevEco Studio的电脑)将字节码提前编译成Target端(即运行应用的设备)可运行的机器码,这样字节码可以获得充分编译优化&#xff0c…

Geeker Admin添加若以分离版本的后台作为后台

添加验证码 下载若依赖前后端分离版本,配置好自己数据库,redis连接地址 登录添加验证码 配置自己的若依后端连接地址 添加验证码请求方法 登录页面登录输入框添加验证码,uuid,调用的验证码刷新方法 注意:这里要用响应式定义验证…

CTP-API开发系列之各版本更新说明(持续更新)(值得收藏)

CTP-API开发系列之各版本更新说明(持续更新)(值得收藏) CTP-API开发系列之各版本更新说明(持续更新)(值得收藏)v6.7.2v6.7.1v6.7.0(推荐,主用)v6.…

Crossover24版现已上线!附免费升级攻略 Crossover软件下载使用方法

好久不见啦,最近一直在忙着研究Mac玩游戏,什么幻兽帕鲁、女神异闻录之类的,有些沉迷了,实在对不住大家… 不过今天还是给大家带来了好消息!那就是让Mac玩游戏不再是笑话的神器,CodeWeavers公司正式发布了C…

禅道:提bug、管理case 7.0

一、禅道的介绍 (1)定义禅道是一个项目管理工具,也是一个bug管理工具,还是一个用例管理工具。 (2)作用:为了解决众多企业在管理中出现混乱,无序的现象,开发出来 &…

QPainter::translate: Painter not active

画笔关联画布 就是这里少写了this指针

Android开发教程入门,揭秘ARouter路由机制

为什么说 Flutter 将是未来的主流跨平台开发框架? Google 的 Flutter 开发应用的体验和流畅度基本和原生体验一致,感觉不到不流畅和卡顿。 我们知道在移动平台上,原生应用的体验最好、流畅度最高、性能也最好。而目前的跨平台技术和框架的流…

8个优秀的CSS实践,web开发语言

突破困境: 1. 提升学历 前端找工作,学历重要吗? 重要。谁要是告诉你不重要那一定是在骗你。现实情况是大专吃紧,本科够用,硕士占优,大专以下找到工作靠运气和真实力。 学历是硬伤,已经毕业的你…

Java知识点总结(二)

ID生成策略 主键自增id 主键自动增长,不用手工设值、数字型,占用空间小、检索非常有利、有顺序,不会重复,但在迁移旧数据是会出现id冲突 UUID 基于时间,计数器和地址生成32位的id redis生成id 原子性自增,并…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:组件标识)

id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。 说明: 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容…

android开发教程百度网盘,高并发系统基础篇

展望未来 操作系统 移动操作系统的演变过程,从按键交互的塞班功能机到触摸屏交互的Android/IOS智能机,从小屏幕手机到全面屏、刘海屏、水滴屏。任何系统无非干两件事:输入和输出,接收到外部输入信号后经过操作系统处理后输出信息…

嵌入式工程师函数变量,常用的命名规则(参考学习)

很多工程师不注重平时编码习惯,比如命名规则,一会大写、一会小写,一会中文拼音,一会下划线等,导致自己写的代码自己都看不懂了。 今天就来分享一点关于软件代码常见的几种命名规则。 匈牙利命名法 匈牙利命名法广泛应…