前端面试题 webpack的工作流程

一、流程图

二、重要概念

1.entry入口

Webpack 从配置的入口点开始,分析应用程序的依赖关系

2.output出口:

定义了打包后的文件如何输出,包括文件名和输出路径。

3.loader加载器:

Webpack 本身只能处理 JavaScript 和 JSON 文件。加载器允许 Webpack 处理其他类型的文件,如将 CSS、图片等资源转换为合适的模块。

4.plugin插件:

扩展 Webpack 的功能,如自动刷新浏览器、优化输出的 JavaScript 代码、提供环境变量等。

5.mode模式:

定义了应用程序的运行环境,可以是 developmentproduction,影响优化和源码映射等。

6.module模块:

一个文件就可以是一个模块。

7.chunk代码块:

一个或多个module可以组成一个chunk。

8.bundle包:

Webpack 将应用程序的所有依赖项(包括 JavaScript、图片、样式表等)打包在一起形成的一个或多个文件。这个过程称为打包(Bundling)。

9.依赖图**(Dependency Graph)**:

Webpack 通过分析模块依赖生成的依赖图,用于确定如何打包模块

10.热模块更新HMR(hot module replacement):

在开发过程中,替换掉那些被更新的chunk,而不需要重新加载整个页面。
相关推荐
用户797476112732 分钟前
Mysql RR事务隔离级别引发的生产Bug,你中招了吗?
前端
Mintopia4 分钟前
🧠 三分视界:Three.js 离屏渲染与多重视角的艺术
前端·javascript·计算机图形学
JarvanMo13 分钟前
Dart & Flutter DevTools 扩展
前端
yuko093115 分钟前
【手机验证码】手机号格式化光标异常问题
前端
原生高钙16 分钟前
高性能前端埋点上报系统的架构与实现
前端·面试
水痕0121 分钟前
nginx一个域名下部署多套前端项目
运维·前端·nginx
Anyin24 分钟前
Spring AI Alibaba - DeepResearch 前端主体 UI 构建
前端·ai编程·trae
非优秀程序员24 分钟前
8 个提升开发者效率的小众 AI 项目
前端·人工智能·后端
河畔一角32 分钟前
一些感悟
前端
excel38 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端