Webpack 是资源协调器，将 import/export 模块、CSS、图片等统一解析打包为浏览器可执行文件；它解决路径别名、node_modules 解析等问题，非语法转换器。
Webpack 解决了浏览器不支持模块化的问题
现代 JavaScript 用 import / export 写模块，但浏览器原生只在 type="module" 下有限支持，且不处理路径别名、node_modules 解析、CSS/图片等资源。Webpack 把这些源码和依赖“打包”成一个或多个浏览器能直接执行的 .js 文件。
它不是语法转换器（那是 Babel 的事），而是资源协调器：把 JS、CSS、字体、SVG 全当“模块”，统一解析、转换、合并、分片。
为什么不能直接用 import 而要 Webpack
常见错误现象：Uncaught TypeError: Failed to resolve module specifier "lodash" 或 Cannot find module './utils.js' —— 浏览器根本不知道 lodash 在哪，也不理解 @/components 这种别名。
-
import _ from 'lodash'：Webpack 会去node_modules/lodash找，Bundler 内部解析并内联或抽离 -
import styles from './index.module.css'：Webpack 调用css-loader+style-loader把 CSS 字符串注入<style></style>标签 -
import avatar from './avatar.png'：默认转成 base64 字符串或生成哈希文件名并返回 URL 字符串
webpack.config.js 最关键的三个配置项
新手常以为 Webpack 很重，其实最小可用配置只需三块：
立即学习“Java免费学习笔记（深入）”；
-
entry：告诉它从哪个 JS 文件开始“顺藤摸瓜”找依赖（如./src/index.js） -
module.rules：定义遇到不同后缀文件怎么处理（.js用babel-loader，.ts用ts-loader） -
output：指定打包后输出到哪（如path: path.resolve(__dirname, 'dist')，filename: '[name].[contenthash].js'）
没配 rules 就无法识别非 JS 文件；没设 output.filename 哈希，就做不到静态资源缓存更新。
Webpack 不是必须的，但替代方案有明确代价
Vite、esbuild、Rspack 等工具出现后，很多人问“还要学 Webpack 吗”。答案取决于场景：
- 老项目维护、定制化构建流程（比如多页应用 + DLL 插件 + 自定义 loader）、需要精细控制 chunk 分割 —— Webpack 仍是事实标准
- 新小项目用 Vite，启动快、HMR 准，但插件生态弱，
resolve.alias或define配置不如 Webpack 直观 - 纯构建提速选 esbuild，但它不支持运行时模块逻辑（如
require('./template/' + name)动态路径），Webpack 能静态分析并打包所有可能路径
真正容易被忽略的是：Webpack 的 loader 和 plugin 是松耦合的，你可以只用 html-webpack-plugin 自动生成 HTML，其余全走原生 ESM —— 它不必“包打天下”，按需接入才是常态。
