Webpack 是最成熟、生态最丰富的模块打包器，核心基于依赖图递归分析 import/require，通过 Entry、Loader、Plugin 和 Output 实现模块打包、转译、压缩与资源管理。
JavaScript 的构建工具是用于自动化开发流程的程序，比如代码编译、模块打包、压缩混淆、热更新等。常见的构建工具有 Webpack、Vite、Rollup、Parcel 等，其中 Webpack 是最成熟、生态最丰富的模块打包器，特别适合中大型项目。
Webpack 的核心作用：把模块“串起来”再“压成一个包”
它不是简单地拼接文件，而是基于依赖图（dependency graph）工作：从你指定的入口文件（如 index.js）开始，递归分析所有 import 或 require 语句，找出全部依赖模块，再按规则处理（转译、压缩、分割等），最终输出浏览器可运行的静态资源。
Webpack 打包的关键步骤
-
入口（Entry）：告诉 Webpack 从哪开始找依赖，例如
entry: './src/index.js' -
加载器（Loader）：处理非 JS 文件，比如用
babel-loader转译 ES6+，用css-loader解析 CSS 中的@import和url() -
插件（Plugin）：执行更广范围的任务，比如
HtmlWebpackPlugin自动生成 HTML 并注入打包后的 JS，MiniCssExtractPlugin把 CSS 单独抽成文件 -
输出（Output）：定义打包后文件名、路径、公共路径（
publicPath），支持哈希命名防缓存，如main.[contenthash].js
Webpack 默认只认识 JavaScript 模块
原生 JS 不支持 import './style.css' 这种写法，但 Webpack 通过 Loader 可以让它“理解”——比如 style-loader 把 CSS 字符串动态插入 <style> 标签，file-loader 或 asset 模式能把图片转为 URL。这正是它能统一管理各类资源的基础。
现代替代方案为什么流行？
Webpack 功能强但配置复杂、启动和热更新偏慢。Vite 利用浏览器原生 ES 模块，在开发时直接按需编译单个文件，跳过打包环节，速度极快；Rollup 更专注库打包，输出更精简。不过，Webpack 在需要深度定制、兼容老环境、做代码分割和懒加载的项目里，依然不可替代。
立即学习“Java免费学习笔记（深入）”；
基本上就这些。Webpack 本质是个可编程的依赖处理器，配置写得越细，打包结果越贴合实际需求。
