[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fbasics":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fbasics":311,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fbasics":336},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":15,"pinned":16,"draft":16,"body":17,"seo":307,"stem":308,"id":309,"extension":310},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fbasics","工程化概览","前端工程化指用工具与规范把「能跑的代码」变成「可协作、可构建、可部署、可维护」的项目：包管理、构建打包、代码质量、Git 工作流与环境配置。本目录与 Vue 工程化、React 工程化 等框架章节互补——此处侧重构建工具与仓库规范。","技能小册",[12,13,14],"vite","webpack","eslint","2020-07-26",false,{"type":18,"value":19,"toc":299},"minimark",[20,23,47,52,106,112,152,155,200,203,244,247,250],[21,22,8],"h1",{"id":8},[24,25,26,27,31,32,37,38,42,43,46],"p",{},"前端",[28,29,30],"strong",{},"工程化","指用工具与规范把「能跑的代码」变成「可协作、可构建、可部署、可维护」的项目：包管理、构建打包、代码质量、Git 工作流与环境配置。本目录与 ",[33,34,36],"a",{"href":35},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Fvue\u002Fproject","Vue 工程化","、",[33,39,41],{"href":40},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fproject","React 工程化"," 等框架章节互补——此处侧重",[28,44,45],{},"构建工具与仓库规范","。",[48,49,51],"h2",{"id":50},"构建工具选型2024","构建工具选型（2024+）",[53,54,55,68],"table",{},[56,57,58],"thead",{},[59,60,61,65],"tr",{},[62,63,64],"th",{},"场景",[62,66,67],{},"建议",[69,70,71,87,98],"tbody",{},[59,72,73,77],{},[74,75,76],"td",{},"新项目（Vue \u002F React \u002F 原生 TS）",[74,78,79],{},[28,80,81],{},[33,82,86],{"href":83,"rel":84},"https:\u002F\u002Fcn.vite.dev\u002F",[85],"nofollow","Vite",[59,88,89,92],{},[74,90,91],{},"维护既有 Webpack 配置、复杂自定义插件",[74,93,94,95],{},"继续 ",[28,96,97],{},"Webpack 5",[59,99,100,103],{},[74,101,102],{},"微前端、Rspack 生态",[74,104,105],{},"按团队已选方案（如 Rsbuild）",[24,107,108,111],{},[28,109,110],{},"事实澄清","（避免常见误解）：",[113,114,115,126,145],"ul",{},[116,117,118,119,122,123,46],"li",{},"Vite ",[28,120,121],{},"开发","：原生 ESM + 按需编译；依赖预构建用 ",[28,124,125],{},"esbuild",[116,127,118,128,131,132,136,137,140,141,46],{},[28,129,130],{},"生产"," ",[133,134,135],"code",{},"vite build","：由 ",[28,138,139],{},"Rollup"," 打包（非 esbuild 产出最终 bundle）。见 ",[33,142,144],{"href":143},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fbuild","Vite 生产构建",[116,146,147,148,46],{},"Webpack：开发与生产均走完整依赖图与 bundle 流程。见 ",[33,149,151],{"href":150},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fwebpack\u002Fworkflow","Webpack 工作原理",[48,153,154],{"id":154},"本目录结构",[53,156,157,167],{},[56,158,159],{},[59,160,161,164],{},[62,162,163],{},"分区",[62,165,166],{},"内容",[69,168,169,179,189],{},[59,170,171,176],{},[74,172,173],{},[33,174,86],{"href":175},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fworkflow",[74,177,178],{},"原理、create-vite、构建、插件、部署",[59,180,181,186],{},[74,182,183],{},[33,184,185],{"href":150},"Webpack",[74,187,188],{},"流程、Loader\u002FPlugin、分包、企业实践",[59,190,191,197],{},[74,192,193],{},[33,194,196],{"href":195},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fgit","项目管理",[74,198,199],{},"Git、环境变量、ESLint\u002FPrettier、Husky、发布",[48,201,202],{"id":202},"推荐学习顺序",[204,205,206,216,230,238],"ol",{},[116,207,208,212,213],{},[33,209,211],{"href":210},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fenv","环境变量"," + ",[33,214,215],{"href":195},"Git 配置",[116,217,218,212,222,212,226],{},[33,219,221],{"href":220},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Feslint","ESLint",[33,223,225],{"href":224},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fprettier","Prettier",[33,227,229],{"href":228},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fhusky","Husky",[116,231,232,235,236],{},[33,233,234],{"href":175},"Vite 工作原理"," 或 ",[33,237,151],{"href":150},[116,239,240],{},[33,241,243],{"href":242},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fwebpack-vite","Webpack 与 Vite 对比",[48,245,246],{"id":246},"参考文献",[24,248,249],{},"以下链接在编写时均可正常访问：",[53,251,252,262],{},[56,253,254],{},[59,255,256,259],{},[62,257,258],{},"资料",[62,260,261],{},"说明",[69,263,264,275,287],{},[59,265,266,272],{},[74,267,268],{},[33,269,271],{"href":83,"rel":270},[85],"Vite 文档",[74,273,274],{},"中文官方",[59,276,277,284],{},[74,278,279],{},[33,280,283],{"href":281,"rel":282},"https:\u002F\u002Fwebpack.js.org\u002F",[85],"Webpack 文档",[74,285,286],{},"英文官方",[59,288,289,296],{},[74,290,291],{},[33,292,295],{"href":293,"rel":294},"https:\u002F\u002Fnodejs.org\u002Fdocs\u002Flatest\u002Fapi\u002F",[85],"Node.js 文档",[74,297,298],{},"运行时",{"title":300,"searchDepth":301,"depth":301,"links":302},"",2,[303,304,305,306],{"id":50,"depth":301,"text":51},{"id":154,"depth":301,"text":154},{"id":202,"depth":301,"text":202},{"id":246,"depth":301,"text":246},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fproject\u002Fbasics","knowledge\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fbasics.md","md",{"items":312},[313,318,322,326,330,334],{"path":314,"title":315,"description":316,"category":10,"score":317},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fother","其他配置","除 ESLint、Prettier 等规范文件外，仓库中常见的工具链与包管理配置如下。见 工程化概览。",12,{"path":150,"title":319,"description":320,"category":10,"score":321},"工作原理","Webpack 是静态模块打包器：从入口递归解析依赖，经 Loader 转换后输出一个或多个 bundle。与 Vite 对比见 Webpack 与 Vite。",6,{"path":323,"title":324,"description":325,"category":10,"score":321},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fdeploy","部署实践","Vite 项目的 CI\u002FCD、多环境、CDN、Legacy 与体积预算等工程化要点。环境变量见 env；构建见 生产构建。",{"path":327,"title":328,"description":329,"category":10,"score":321},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fwebpack\u002Fchunks","产物优化","Webpack 通过代码分割、Tree Shaking、压缩与资源模块等减少体积、改善缓存。原理背景见 工作原理。",{"path":331,"title":332,"description":333,"category":10,"score":321},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fwebpack\u002Fcompany","企业级实践","大型前端项目在 Webpack 场景下的多环境拆分、Docker 构建缓存、自定义 CLI 与微前端（Module Federation \u002F single-spa）等实践。入门见 工程化概览。",{"path":220,"title":221,"description":335,"category":10,"score":321},"ESLint 是可配置的 JavaScript\u002FTypeScript 静态检查工具，用于发现语法问题、不良实践与部分风格问题。格式化交给 Prettier。见 工程化概览。",{"series":337,"title":338,"items":339,"index":301,"prev":413,"next":414},"booklet\u002Fproject","project",[340,344,347,348,352,355,357,361,363,367,369,373,375,377,379,382,386,388,392,396,398,402,406,409,411],{"path":341,"title":342,"date":343,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fwebpack\u002Fadvanced","进阶配置","2021-10-18",{"path":345,"title":342,"date":346,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fadvanced","2022-05-08",{"path":7,"title":8,"date":15,"pinned":16},{"path":349,"title":350,"date":351,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fbrowserslistrc","Browserslist","2020-09-12",{"path":143,"title":353,"date":354,"pinned":16},"生产构建","2021-07-24",{"path":327,"title":328,"date":356,"pinned":16},"2025-01-28",{"path":358,"title":359,"date":360,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fcommitizen","Commitizen","2025-12-03",{"path":331,"title":332,"date":362,"pinned":16},"2024-07-30",{"path":364,"title":365,"date":366,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fcreate-vite","create-vite","2021-03-05",{"path":323,"title":324,"date":368,"pinned":16},"2025-10-12",{"path":370,"title":371,"date":372,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Feditorconfig","EditorConfig","2022-11-07",{"path":210,"title":211,"date":374,"pinned":16},"2023-02-13",{"path":220,"title":221,"date":376,"pinned":16},"2024-04-07",{"path":195,"title":215,"date":378,"pinned":16},"2025-06-21",{"path":228,"title":380,"date":381,"pinned":16},"Husky 与提交规范","2021-04-05",{"path":383,"title":384,"date":385,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fwebpack\u002Floader","Loader","2022-11-14",{"path":314,"title":315,"date":387,"pinned":16},"2022-01-19",{"path":389,"title":390,"date":391,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fwebpack\u002Fplugin","Plugin","2020-08-27",{"path":393,"title":394,"date":395,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fplugin","插件开发","2023-03-27",{"path":224,"title":225,"date":397,"pinned":16},"2023-09-22",{"path":399,"title":400,"date":401,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Frelease-it","Release It","2022-06-22",{"path":403,"title":404,"date":405,"pinned":16},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fstylelint","Stylelint","2025-07-10",{"path":242,"title":407,"date":408,"pinned":16},"Webpack 与 Vite","2023-02-06",{"path":175,"title":319,"date":410,"pinned":16},"2020-06-15",{"path":150,"title":319,"date":412,"pinned":16},"2025-12-19",{"path":345,"title":342,"date":346,"pinned":16},{"path":349,"title":350,"date":351,"pinned":16}]