Webpack 知识点整理

news/2025/3/17 5:22:49/

​

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 目录

Webpack__Loader__49">3. Webpack 中常见的 Loader ？解决了什么问题？

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

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

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

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

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

Webpack__Loader__Plugin___Loader_Plugin__67">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）

Webpack___79">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 机制，加载这两个文件，并且针对修改的模块进行更新

Webpack_proxy___92">7. Webpack proxy 工作原理？ 为什么能跨域？

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

跨域：（ 服务器和服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略限制 ）

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

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

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

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

Webpack__114">9.如何提高 Webpack 的构建速度？

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

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

Webpack__127">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 环境下的入口文件

Webpack__148">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.ppmy.cn/news/1579744.html

相关文章

常见JVM命令

常见JVM命令

1. java -XX:PrintCommandLineFlags HelloGC 作用&#xff1a;打印 JVM 启动时的命令行参数&#xff0c;包括用户显式设置的参数和 JVM 自动默认设置的参数。用于确认 JVM 实际使用的配置。 2. java -Xmn10M -Xms40M -Xmx60M -XX:PrintCommandLineFlags -XX:PrintGC -XX:Prin…
阅读更多...
贪心算法和遗传算法优劣对比——c#

贪心算法和遗传算法优劣对比——c#

项目背景&#xff1a;某钢管厂的钢筋原材料为 55米&#xff0c;工作需要需切割 40 米&#xff08;1段&#xff09;、11 米&#xff08;15 段&#xff09;等 4 种规格 &#xff0c;现用贪心算法和遗传算法两种算法进行计算&#xff1a; 第一局&#xff1a;{ 40, 1 }, { 11, 15…
阅读更多...
让 Deepseek 写一个计算器（网页）

让 Deepseek 写一个计算器（网页）

完整代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>简单计算器</title><style&…
阅读更多...
Netty启动源码NioEventLoop剖析accept剖析read剖析write剖析

Netty启动源码NioEventLoop剖析accept剖析read剖析write剖析

学习链接 NIO&Netty - 专栏 Netty核心技术十–Netty 核心源码剖析Netty核心技术九–TCP 粘包和拆包及解决方案Netty核心技术七–Google ProtobufNetty核心技术六–Netty核心模块组件Netty核心技术五–Netty高性能架构设计 聊聊Netty那些事儿 - 专栏 一文搞懂Netty发送数…
阅读更多...
AI自动文献综述——python先把知网的文献转excel

AI自动文献综述——python先把知网的文献转excel

第一步 Refworks转excel 下载以后是个txt文件， 帮我把这个txt文件转excel，用函数形式来写便于我后期整理成软件 提取 其中的 标题，作者，单位，关键词，摘要。 分别存入excel列。 import re import pandas as pddef extract_and_convert(txt_file_path, output_excel_path…
阅读更多...
地理信息系统（ArcGIS）在水文水资源、水环境中的应用

地理信息系统（ArcGIS）在水文水资源、水环境中的应用

一 ArcGIS&#xff1a;数据管理 1.1ArcGIS界面及数据加载 1.2ArcGIS常见数据格式 1.3基于Geodatabase的数据库构建 1.4环境信息的查询与输出 1.5 文档保存方式 二 ArcGIS&#xff1a;数据转换 2.1 常用地图投影介绍 2.2 投影变换 2.3 地理坐标转换&#xff08;北京54、西安80…
阅读更多...
当大模型训练遇上“双向飙车”：DeepSeek开源周 DualPipe解析指南

当大模型训练遇上“双向飙车”：DeepSeek开源周 DualPipe解析指南

前言 在大模型训练中&#xff0c;传统流水线并行因单向数据流和通信延迟的限制&#xff0c;导致GPU利用率不足60%&#xff0c;成为算力瓶颈。DeepSeek团队提出的DualPipe双向流水线架构&#xff0c;通过双向计算流与计算-通信重叠的创新设计&#xff0c;将前向与反向传播拆解为…
阅读更多...
Linux练级宝典-＞任务管理和守护进程

Linux练级宝典-＞任务管理和守护进程

任务管理 进程组概念 每个进程除了进程ID以外&#xff0c;还有一个进程组&#xff0c;进程组就是一个或多个进程的集合 同一个进程组&#xff0c;代表着他们是共同作业的&#xff0c;可以接收同一个终端的各种信号&#xff0c;进程组也有其唯一的进程组号。还有一个组长进程&a…
阅读更多...
最新文章

Copyright @ 2022~2023