代码打包是将模块依赖、样式等按规则合并转换为可运行产物，Webpack通过分析依赖图解决浏览器模块化兼容问题，但Vite在新项目中更轻量高效。
代码打包不是把文件 zip 压缩一下，而是把分散的 import、require、模块依赖、样式、资源等，按规则合并、转换、生成能在目标环境（比如浏览器）运行的产物。Webpack 是最常用的打包工具之一，但它不是唯一选择，也不是所有项目都适合用它。
Webpack 的核心作用：解决模块化运行时问题
浏览器原生不支持 import 从本地路径加载 JS（比如 import utils from './utils.js'），Node.js 的 require 也不能直接在前端用。Webpack 把这些语句识别出来，分析依赖图，把所有相关代码“翻译”成一个或多个可执行的 .js 文件，并处理路径、变量作用域、导出方式等兼容性问题。
常见错误现象：
- 页面报错
Uncaught ReferenceError: require is not defined—— 直接在 HTML 中 script 引入 CommonJS 风格模块 -
Failed to resolve module specifier "lodash"—— 浏览器不理解裸导入（bare import），而 Webpack 可以把它映射到node_modules/lodash/index.js
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 初始化项目必须有
package.json（用npm init -y快速生成） - 安装 Webpack 本体和 CLI：
npm install --save-dev webpack webpack-cli - 最小可用配置只需一个
webpack.config.js，导出对象含entry和output
如何写一个最小但能跑的 webpack.config.js
别一上来就抄 200 行配置。先让代码动起来，再加 loader、plugin。很多构建失败，是因为配置里写了用不到的功能，或者 loader 版本不匹配。
关键点：
-
entry是起点，通常是一个 JS 文件路径；output.path必须是绝对路径（用path.resolve()） - Webpack 5+ 默认开启
mode: 'production'，会压缩代码；开发时建议显式设为'development'保留 source map - 不配
module.rules就无法处理 CSS、TS、图片等——纯 JS 项目可以跳过这一步
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Vite vs Webpack：什么时候不该用 Webpack
Webpack 启动慢、配置重、热更新（HMR）有时卡顿，尤其对新项目或以 Vue/React 为主的前端项目，Vite 是更轻量、更快的替代方案。它利用浏览器原生 ES 模块能力，在开发时不做打包，只按需编译单个文件。
使用场景判断：
- 需要兼容 IE11 或旧版 Android WebView？Webpack 更稳妥（Vite 默认不支持）
- 项目已有大量自定义 Webpack plugin（如定制 HTML 注入、DLL 分包）？迁移成本高，继续用 Webpack
- 新启动的 React/Vue/Svelte 项目，且不需要特殊构建逻辑？优先试 Vite，
npm create vite@latest一行搞定 - 构建产物要塞进嵌入式设备或超小体积要求（
打包后文件没更新？检查缓存和输出名
开发中改了代码，刷新页面却还是旧逻辑，大概率不是代码没保存，而是：
- 浏览器缓存了
bundle.js—— Webpack 开发服务器默认加了 hash，但手动引入时若写死，就绕过了缓存控制 -
output.filename没带 hash，导致浏览器认为文件没变，复用旧缓存 - 用了
HtmlWebpackPlugin但没启用inject: true，JS 文件没自动插入 HTML
推荐做法：
- 开发期用
webpack serve，它自带内存文件系统和 cache busting - 生产构建时用
filename: '[name].[contenthash:8].js'，内容变了 hash 才变 - HTML 中不要手写 script 标签，交给插件生成
真正麻烦的从来不是“怎么配”，而是“为什么配了还不生效”。查构建日志、看 dist 目录实际输出、对比 network 面板加载的文件 URL——这些比重装依赖有用得多。
