Webpack 非必需但项目复杂时绕不开，常见报错源于入口输出配置错误、loader缺失（如CSS/图片/TS）、mode与devtool未设导致调试部署困难。
Webpack 不是必须的，但如果你的 JavaScript 项目开始有模块依赖、需要处理 .ts、.scss、图片或做代码分割，它就从“可选”变成“绕不开”。默认不配 webpack.config.js 也能跑，但那只是用零配置模式（webpack 5+ 内置），实际项目中几乎一定会遇到它不认你写的路径、加载不了 CSS、或者打包后 require 报错的问题。
为什么 webpack 打包后代码无法运行：入口和输出配置没对上
最常见的情况是：你写了 src/index.js，但没在配置里告诉 webpack “这就是起点”；或者输出路径写成 dist/bundle.js，却在 HTML 里引用了 dist/main.js —— 浏览器自然 404。
-
entry必须指向一个存在的 JS 文件，支持字符串（单入口）、数组（多文件合并）、对象（命名入口） -
output.path是绝对路径，别写相对路径，推荐用path.resolve(__dirname, 'dist') -
output.filename默认是'main.js'，如果改了，HTML 的也得同步改 - 开发时建议加
output.clean: true，避免旧文件残留干扰调试
loader 没配好：CSS、图片、JSX 等资源直接报错
Webpack 默认只认识 JS。遇到 import './style.css' 或 import logo from './logo.png'，会直接抛 Module parse failed 错误——这不是语法错，是 loader 缺失。
- CSS 需要三件套：
css-loader（解析@import和url()）、style-loader（把 CSS 插入 DOM）、mini-css-extract-plugin（生产环境抽离成 .css 文件） - 图片/字体等静态资源：用
asset-module（webpack 5+ 内置），替代老式的url-loader+file-loader - JSX / TypeScript：分别配
babel-loader或ts-loader，注意babel.config.js或tsconfig.json得存在且有效 - 所有
loader都在module.rules里按test正则匹配，顺序重要：越具体的 rule 越往前放（比如先匹配.module.css，再匹配通用.css）
mode 和 devtool 不设，开发体验差、生产包体积大
mode: 'development' 和 mode: 'production' 不只是开关，它背后联动了 20+ 内置优化项。不设 mode，webpack 会警告，且默认行为既不压缩也不加 sourcemap，调试和部署都难受。
立即学习“Java免费学习笔记（深入）”；
-
devtool: 'source-map'（开发）或'hidden-source-map'（生产）必须显式配，否则断点打不上、错误堆栈指向压缩后代码 - 生产环境默认启用
TerserPlugin压缩 JS，但若你用了eval类 loader 或动态import()，可能需额外配optimization.splitChunks控制分包逻辑 - 开发服务器用
webpack-dev-server，关键配devServer.static（指定静态资源根目录）和devServer.open（自动开浏览器）
真正卡住人的往往不是“怎么写 config”，而是某个 loader 的 options 漏了一个字段（比如 css-loader 缺 modules: { auto: true } 导致 CSS Modules 失效），或者 resolve.extensions 没加 '.ts' 导致 import Foo from './foo' 找不到 foo.ts。这些细节不会报错提示“你少配了”，只会让行为静默偏离预期。
