第十章：构建之巅 · 打包与部署的终极试炼
第一章：HTML基石·现实的骨架
第二章：CSS秘典 · 色彩与布局的力量
第三章：JavaScript引擎 · 行为之火
第四章：DOM迷宫 · 掌控页面之心
第五章：异步幻境 · 时间与数据的秘密
第六章：事件风暴 · 用户的意志
第七章：组件之城 · 重构世界的拼图术
第八章：数据幻域 · 状态与响应的涌动之力
第九章：路由边境 · 穿越页面的维度之门
剧情引入：升上云巅
林昊穿越了九章考验，来到最后的“构建之巅”。这里云雾缭绕，站着一位身披编译火焰的老人——“构建长老”。长老说：
“代码完成，并不等于使命达成。你必须学会将源代码编译成浏览器能运行的形式，并安全地交付给用户。”
于是，林昊踏入最后的打包之门——终极试炼：构建与部署。
一、为什么要构建？
开发代码 ≠ 浏览器可直接运行代码
开发中使用的语法和工具，如：
- ES6+ 高级语法（如 async/await、模块导入）
- SASS、LESS 预处理器
- JSX、TSX 模板
- 模块化组织（import、export）
都需要打包构建，转换为浏览器识别的 HTML/CSS/JS。
二、模块化的奥义
🔹 CommonJS（Node 使用）：
// a.js
module.exports = function () {}// b.js
const a = require('./a')
🔹 ESM（浏览器支持，现代前端主流）：
// a.js
export default function () {}// b.js
import a from './a.js'
构建工具的使命：扫描这些模块关系，打包成一个或多个浏览器能识别的 bundle。
三、Webpack：构建的炼金术
Webpack 是前端最主流的构建工具之一，它像一个炼金术士，将源码变为纯净的可执行“黄金包”。
⚙ 基本使用：
npm install webpack webpack-cli -D
// webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',},module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] },]}
}
npx webpack --mode production
🧩 核心概念：
| 概念 | 说明 |
|---|---|
| Entry | 入口文件 |
| Output | 输出设置 |
| Loaders | 预处理器，如转译 TS/LESS |
| Plugins | 插件，如压缩、注入环境变量等 |
| Mode | 构建模式：development 或 production |
四、Vite：极速构建新纪元
构建长老指向一座白色轻舟——“Vite”，飞速而稳定。
Vite 是基于原生 ESM 的现代构建工具，冷启动极快，适合 React/Vue 项目。
npm create vite@latest my-project
cd my-project
npm install
npm run dev
开箱即用，几乎不需配置；支持 HMR 热更新、TS/JSX/SASS、插件机制等。
五、构建优化秘籍
| 技术术语 | 简述 |
|---|---|
| Tree-Shaking | 移除未使用的代码 |
| Code Splitting | 拆分 bundle 实现按需加载 |
| Lazy Loading | 页面滚动或用户触发时再加载某些模块（如图片、JS） |
| 压缩 Minify | 使用 Terser、cssnano 等压缩体积 |
| SourceMap | 映射调试源码位置（生产环境中通常关闭） |
六、部署上线：将代码托付给世界
✅ 方法一：GitHub Pages
-
将项目推送到 GitHub
-
安装部署工具：
npm install gh-pages -D -
修改 package.json：
"scripts": {"predeploy": "npm run build","deploy": "gh-pages -d dist" } -
执行部署：
npm run deploy
✅ 方法二：Vercel / Netlify（支持 CI）
- 可自动读取 Git 仓库并部署静态站点
- 支持自动构建、回滚、预览环境
- 免费使用，绑定自定义域名
🧠 实战任务：登顶挑战
- 使用 Webpack 或 Vite 构建一个小型前端项目（含组件、样式）
- 尝试使用 Tree-Shaking，观察包大小变化
- 使用 Netlify 部署项目并访问公网链接
- 用 webpack-bundle-analyzer 查看打包体积构成