Webpack 知识点整理

news2025/3/16 8:51:17

1. 对 webpack 的理解?解决了什么问题?

Webpack 是前端工程化领域的核心工具,其核心定位是模块打包器(Module Bundler),通过将各类资源(JS、CSS、图片等)视为模块并进行智能整合,解决了传统前端开发中的多维度问题

解决问题:
1. 模块化开发与依赖管理

  • 传统痛点:早期前端依赖全局变量和手动< script>标签管理代码,易命名冲突和依赖混乱
  • Webpack 方案: 支持 ES Module、CommonJS等模块化语法,自动构建依赖图,实现模块的精准加载与隔离

2. 多类型资源整合

  • 传统痛点:CSS 、图片等 非 JS 资源需单独处理,缺乏统一管理
  • Webpack 方案: 通过 Loader (如 css-loader、file-loader)将非 JS资源转换为 JS可识别模块,实现"一切皆模块"

3.性能优化与工程化

  • 传统痛点:全量打包导致首屏加载慢,代码冗余
  • Webpack 方案
    • Code Splitting:按需分割代码块(如路由级拆分),减少首屏体积
    • Tree Shaking:静态分析剔除未使用的代码,减少打包体积
    • 缓存优化:文件名哈希策略(文件指纹),实现长效缓存

4.开发体验提升

  • 传统痛点:手动刷新、调试困难
  • Webpack方案:
  • HMR(热模块替换):局部更新模块、保留应用状态
  • DevServer:内置开发服务器,支持代理、Mock数据

2. webpack 构建流程?

Webpack 的构建流程可分为 三大阶段,涵盖 10+ 关键步骤

  1. 初始化阶段

    • 读取配置:合并命令行参数与 webpack.config.js,确定入口 (Entry)、输出(Output)等
    • 创建 Compiler:全局单例对象,管理生命周期和插件调度
    • 注册插件:调用各插件的 apply 方法,挂载到 Compiler 钩子(如 beforeRun、compile)
  2. 编译构建阶段

    • 模块解析:从Entry 出发,递归解析依赖,生成 Module 对象
    • Loader 转换:调用匹配的 loader 处理文件内容
    • AST 分析: 使用 acorn 生成抽象语法树,提取依赖关系
  3. 输出阶段

    • Chunk 生成:根据依赖图将 Module合并为 Chunk (如按入口或者动态导入拆分)
    • 资源优化:执行插件(如 TerserPlugin)压缩代码,应用 Tree Shaking
    • 文件写入:将 Chunk 转换为最终文件,输出至 dist 目录

3. Webpack 中常见的 Loader ?解决了什么问题?

Loader 是 Webpack 的核心模块处理器,用于将非 Javascript 文件(如 css、图片、字体等)转换为 Webpack 可识别的有效模块,解决如下关键问题:

  1. 模块化兼容:将各类资源统一视为模块,支持 import/require 语法引入
  2. 资源转换:编译预处理语言(如 Sass、Typescript )、压缩图片、转译 ES6+ 语法等,扩展 Webpack 处理能力
  3. 性能优化:减少 HTTP 请求(如 Base64 内联小文件)、代码分割 与 Tree Shaking 支持
    Loader 本质是个函数。

4. Webpack 中常见的 Plugin ? 解决了什么问题?

Plugin 通过【基于tapable】扩展构建流程的生命周期钩子,解决了以下核心问题:
- 自动化资源管理:如 HTML 生成、CSS提取、静态文件复制等;
- 性能优化: 代码压缩、分包、缓存控制
- 开发体验增强:环境变量注入、构建进度反馈
- 深度分析:可视化报告辅助优化决策

赋予 Webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,他们会运行在 Webpack 的不同阶段(钩子/ 生命周期),贯穿了 webpack 整个编译周期,目的在于解决 loader 无法实现的其他事。
Plugin 本质是一个类。

5. Webpack 说说 Loader 和 Plugin 的区别? 编写 Loader 、Plugin 思路?

Loader

  • 本质是文件转换器,用于处理单个文件。Webpack原生只能解析 JavaScript ,而Loader 负责将其他类型文件(如 CSS、图片、Typescript)转换为 Webpack 可识别的模块,例如 将ES6+ 转换为 ES5、将 CSS注入到 HTML 的< style>标签等;
  • 在模块加载阶段运行,配置在 module.rules 中,通过 test 匹配文件类型,use 指定处理顺序(从右到左执行)。例如处理 CSS 时的顺序为 css-loader => style.loader
    Plugin
  • 本质是功能扩展器,作用域整个构建流程。Plugin 通过监听 Webpack 生命周期中的事件(如编译完成、资源输出),实现复杂任务,例如代码压缩、生成 HTML文件、分析打包体积等
  • 贯穿 Webpack 整个编译周期,配置在 Plugin 数组中,需实例化并注册到 Webpack 的钩子(Hooks)上。例如 HtmlWebpackPlugin 在构建完成后生成 HTML。

编写思路:

  • loader:导出一个函数,接收源文件内容,返回处理后的内容,可以时同步返回(直接返回)或异步(通过 this.async 回调)
  • Plugin: 导出一个类,需定义 apply 方法,通过 compiler 和 compilation 对象访问 Webpack 内部数据,并绑定生命周期钩子(如 emit、done)

6. Webpack 的热更新是如何做到的? 原理是什么?

HMR ( Hot Module Replacement )

原理:

通过 webpack-dev-server 创建两个服务器: 提供静态资源的服务( Express )和 Socket 服务
Express server 负责直接提供静态资源的服务 ( 打包后资源直接被浏览器请求和解析)
Socket server 是一个 websocket 的长连接,双方可以互相通信
当 socket server监听到对应的模块发生变化时,会生成两个文件 .json ( manifest 文件 ) 和 .js ( unpdate chunk )
通过长连接,socket server 可以直接将这两个文件主动发送给客户端 ( 浏览器)
浏览器拿到两个新的文件后,通过 HMR runtime 机制,加载这两个文件,并且针对修改的模块进行更新

7. Webpack proxy 工作原理? 为什么能跨域?

proxy 工作原理: 实质利用 http-proxy-middleware 这个 http 代理中间件,实现请求转发给其他服务器

跨域:( 服务器和服务器之间请求数据并不会存在跨域行为,跨域行为是浏览器安全策略限制 )

在开发阶段, webpack-dev-server 会启动一个本地开发服务器,所以我们的应用在开发阶段是独立运行在 localhost 的一个端口上,而后端服务器有事运行在另外一个地址上。所以在开发阶段中,由于浏览器同源策略的原因,当本地访问后端就会出现跨域请求。

解决跨域: 当本地发送请求的时候,代理服务器响应该请求,并将请求转发到目标服务器上,目标服务器响应数据后再将数据返回给代理服务器,最终再由代理服务器将数据响应给本地。

8. 如何借助 Webpack 来优化前端性能

优化方向核心策略工具/配置
代码体积Tree Shaking、代码分割、压缩TerserPlugin、SplitChunks
加载性能懒加载、CDN、预加载import()、externals、preload
构建效率缓存、多进程、Webpack 5 升级cache: filesystem、thread-loader
长期缓存Content Hash、文件系统缓存[contenthash]、Webpack 5 缓存配置

9.如何提高 Webpack 的构建速度?

主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手

优化 loader 配置 ( 通过配置 include、exclude、test属性来匹配文 )
合理使用 resolve.extensions
优化 resolve.modules ( 第三方模块的绝对路径,以减少寻找 )
优化 resolve.alias ( alias给一些常用的路径起一个别名,例如:@)
使用 DLLPlugin 插件
使用 cache-loader
terser 启动多线程
合理使用 sourceMap

10. 与 Webpack 类似的工具还有哪些

Rollup ( Vue、React 和 Three.js )
Parcel ( 零配置、傻瓜式 )
Snowpack ( 闪电般快速,较为复杂、Webpack 和 Parcel 的替代方案)
Webpack 的优势:

智能解析: 对 CommonJS、AMD、ES6 的语法做了兼容
万物模块: 对 js、css、图片等资源文件都支持打包
开箱即用: 集成 HRM、Tree-Shaking 等功能
代码分割: 可以将代码切割成不同的 chunk,实现按需加载,降低了初始化时间
插件系统: 具有强大的 Plugin 接口,具有更好的灵活性和扩展性
易于调试:支持 ScoureUrls 和 ScoureMap
快速运行: Webpack 使用异步 IO 并具有多级缓存,这使得 Webpack 很快且在增量编译上更加快
生态环境好:社区更丰富,出现问题更容易解决

11. webpack 常用字段

main:定义了 npm 包的入口文件
mudule: 定义了 npm 包的 ESM 规范的入口文件
browser: 定义了 npm 包在 browser 环境下的入口文件

12. Webpack 常用插件

  1. webpack、webpack-cli 、webpack-dev-server
  2. html-webpack-plugin ( 打包 html 文件 )
  3. clean-webpack-plugin ( 打包前删除输出目录 )
  4. webpack-merge ( 合并 webpack 配置)
  5. optimize-css-assets-webpack-plugin ( css 压缩 )
  6. style-loader ( 将 css 插入到 html )
  7. postcss-loader ( 处理 css 的兼容性 ) 和 autoprefixer 一起用
  8. file-loader ( 处理图片文件 )
  9. url-loader ( 将图片转换成 base64 格式 )
  10. mini-css-extract-plugin ( 将 css 单独打包成一个文件 )
  11. terser-webpack-plugin ( 压缩 JS 代码 )
  12. @babel/perset-env ( 处理 js 的浏览器兼容问题 )

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从零搭建微服务项目Pro(第2-2章——JSR303自定义文件校验+整合至微服务公共模块)

前言&#xff1a; JSR 303&#xff0c;即 Bean Validation&#xff0c;是 Java EE 6 中的一项子规范&#xff0c;旨在为 Java Bean 提供一种标准化的数据验证机制。它通过注解的方式&#xff0c;允许开发者在 Java 类的字段或方法上直接定义验证规则&#xff0c;从而将验证逻辑…

如何用URDF文件构建机械手模型并与MoveIt集成

机械手URDF文件的编写 我们用urdf文件来描述我们的机械手的外观以及物理性能。这里为了简便&#xff0c;就只用了基本的圆柱、立方体了。追求美观的朋友&#xff0c;还可以用dae文件来描述机械手的外形。 import re def remove_comments(text):pattern r<!--(.*?)-->…

【训练细节解读】文本智能混合分块(Mixtures of Text Chunking,MoC)引领RAG进入多粒度感知智能分块阶段

喜欢本文可以在主页订阅专栏哟 核心创新&#xff1a;双重评估指标与混合分块架构&#xff1a; 第一章&#xff1a;检索增强生成&#xff08;RAG&#xff09;技术演进与分块挑战 1.1 RAG架构的核心演变 检索增强生成&#xff08;Retrieval-Augmented Generation&#xff09…

招聘信息|基于SprinBoot+vue的招聘信息管理系统(源码+数据库+文档)

招聘信息管理系统 目录 基于SprinBootvue的招聘信息管理系统 一、前言 二、系统设计 三、系统功能设计 5.1系统功能模块 5.2管理员功能模块 5.3企业后台管理模块 5.4用户后台管理模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、…

HCIA-AI人工智能笔记1:大模型技术演进与发展历程

一、大模型发展的技术演进图谱 timelinetitle 大模型发展关键里程碑1958 : 感知机模型诞生&#xff08;Frank Rosenblatt&#xff09;1986 : BP反向传播算法&#xff08;Rumelhart&#xff09;2012 : AlexNet开启深度学习时代2017 : Transformer架构提出&#xff08;《Attenti…

在微信小程序或前端开发中,picker 和 select 都是用户交互中用于选择的组件,但它们在功能、设计和使用场景上有一定的区别

在微信小程序或前端开发中&#xff0c;picker 和 select 都是用户交互中用于选择的组件&#xff0c;但它们在功能、设计和使用场景上有一定的区别。 1. picker 的特点 描述&#xff1a; picker 是微信小程序中的原生组件&#xff0c;通常用于选择单项或多项值&#xff0c;如时…

向量数据库对比以及Chroma操作

一、向量数据库与传统类型数据库 向量数据库&#xff08;Vector Storage Engine&#xff09;与传统类型的数据库如关系型数据库&#xff08;MySQL&#xff09;、文档型数据库&#xff08;MongoDB&#xff09;、键值存储&#xff08;Redis&#xff09;、全文搜索引擎&#xff0…

Python Matplotlib面试题精选及参考答案

绘制函数 y2x5 在区间 [1,10] 的折线图&#xff0c;设置标题和坐标轴标签 要绘制函数 y 2x 5 在区间 [1, 10] 的折线图&#xff0c;并设置标题和坐标轴标签&#xff0c;可借助 Python 的 matplotlib 库来实现。以下是详细的实现步骤与代码示例。 首先&#xff0c;要导入 mat…

正点原子[第三期]Arm(iMX6U)Linux移植学习笔记-5.1 uboot顶层Makefile分析-VSCode工程创建

前言&#xff1a; 本文是根据哔哩哔哩网站上“Arm(iMX6U)Linux系统移植和根文件系统构键篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。 引用&#xff1a; …

OTP单片机调试工具之—单线数据编码

OTP单片机调试工具在实现过程中离不开单线数据的传输&#xff0c;那么使用哪一种方式的数据编码会比较好呢&#xff1f; 我所了解的主要有以下三种&#xff1a; 1.UART&#xff08;串口&#xff09;&#xff0c;这种方式在单片机和pc之间进行传输都非常常见&#xff0c;效率比较…

Java 基础到进阶企业技巧(二)

在 Java 学习的旅程中&#xff0c;我们逐步探索了其丰富的知识体系&#xff0c;从基础的数据类型、字符串操作&#xff0c;到流程控制、运算符的运用&#xff0c;每一步都为我们构建强大的编程能力奠定基石。同时&#xff0c;了解这些知识在 Java 全栈开发中的应用场景&#xf…

Google最新生图模型Gemini-2.0-Flash-Exp免费用

Google发布新生图模型 Google释放出最新生图模型&#xff0c;在发布说明中提到&#xff1a; 2025年3月12日 在 Gemini-2.0-Flash-Exp 中发布原生图像输出功能 Gemini 2.0 Flash Experimental 模型发布&#xff0c;支持原生图像输出功能。开发者能够使用 Gemini 进行图像输出和…

leecode695.岛屿的最大面积

跟求岛屿数量的题目差不多&#xff0c;依旧是深度搜索或者广度搜索问题 class Solution { private:int maxAreaOfIsland(vector<vector<int>>& grid,vector<vector<bool>>& visited,int x,int y){if(x<0||x>grid.size()||y<0||y>…

助力字体管理,规避设计卡顿的得力工具

在设计领域&#xff0c;字体看似平常&#xff0c;却常常在关键时刻“掉链子”&#xff0c;让设计师们头疼不已。面对海量字体库&#xff0c;找到心仪那款宛如大海捞针&#xff0c;字体安装过多还会造成软件卡顿&#xff0c;这些麻烦事儿&#xff0c;频繁与字体打交道的朋友肯定…

数统院复试来啦,西电数学与统计学院—考研录取情况

4西安电子科技大学—数学与统计学院—考研录取统计 01、数学与统计学院各个方向 02、24数学与统计学院近三年复试分数线对比 数统院24年院线相对于23年院线增加高达30分&#xff0c;确实增长浮动比较高&#xff0c;接近30分的水平&#xff0c;因此大家更需要好好去努力&#xf…

Windows功能之FTP服务器搭建

一、创作背景 之前有用linux系统搭建过ftp服务器&#xff0c;最近想着用windows系统也顺便搭建一个&#xff0c;看网上有第三方服务软件一键部署&#xff0c;记得windows可以不借助第三方软件就可以搭建&#xff0c;就想顺便操作试试&#xff0c;结果老是连接不上&#xff0c;费…

leetcode hot100普通动态规划/基础DP

1️⃣1️⃣ 普通动态规划&#xff08;基础 DP&#xff09; 70. 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 题解: 动态规划Dynamic Programming ,在观察动态中找到如何规划解题的步骤…

基于Python的天气预报数据可视化分析系统-Flask+html

开发语言&#xff1a;Python框架&#xff1a;flaskPython版本&#xff1a;python3.8数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 系统登录 可视化界面 天气地图 天气分析 历史天气 用户管理 摘要 本文介绍了基于大数据…

【鸿蒙开发】Hi3861学习笔记-Visual Studio Code安装(New)

00. 目录 文章目录 00. 目录01. Visual Studio Code概述02. Visual Studio Code下载03. Visual Studio Code安装04. Visual Studio Code插件05. 附录 01. Visual Studio Code概述 vscode是一种简化且高效的代码编辑器&#xff0c;同时支持诸如调试&#xff0c;任务执行和版本管…

Redis基本命令手册——五大类型

目录 一&#xff1a;基本操作 二&#xff1a;字符串&#xff08;String&#xff09; 三&#xff1a;哈希&#xff08;Hash) 四&#xff1a;列表&#xff08;List&#xff09; 五&#xff1a;集合&#xff08;Set&#xff09; 六&#xff1a;有序集合&#xff08;Zset&…