【面试题】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性能优化

相关推荐
恋猫de小郭36 分钟前
Flutter 3.35 发布,快来看看有什么更新吧
android·前端·flutter
chinahcp20082 小时前
CSS保持元素宽高比,固定元素宽高比
前端·css·html·css3·html5
gnip3 小时前
浏览器跨标签页通信方案详解
前端·javascript
gnip3 小时前
运行时模块批量导入
前端·javascript
hyy27952276843 小时前
企业级WEB应用服务器TOMCAT
java·前端·tomcat
逆风优雅3 小时前
vue实现模拟 ai 对话功能
前端·javascript·html
若梦plus4 小时前
http基于websocket协议通信分析
前端·网络协议
不羁。。4 小时前
【web站点安全开发】任务3:网页开发的骨架HTML与美容术CSS
前端·css·html
这是个栗子4 小时前
【问题解决】Vue调试工具Vue Devtools插件安装后不显示
前端·javascript·vue.js
姑苏洛言4 小时前
待办事项小程序开发
前端·javascript