CSS 内联 ⽅方案⼆二：html-inline-css-webpack-plugin ⽅方案⼀一：借助 style-loader module.exports = { module: { rules: [ { test: /\.scss$/, use: /src/search.js ‘ } }; 缺点：每次新增或删除⻚页⾯面需要改 webpack 配置 每个⻚页⾯面对应⼀一个 entry，⼀一个 html-webpack-plugin 多⻚页⾯面打包通⽤用⽅方案 动态获取 entry 和设置 html-webpack-plugin 数量量 利利⽤用 glob.sync module.exports = { entry: { index: './src/index/index eslint:recommend 配置并 改进 帮助保持团队的代码⻛风格统⼀一，⽽而不不是限制开发 体验 ESLint 如何执⾏行行落地？ 和 CI/CD 系统集成 和 webpack 集成 ⽅方案⼀一：webpack 与 CI/CD 集成 增加 lint pipline 本地开发阶段增加 precommit 钩⼦子 安装 husky 增加 npm script，通过 lint-staged

强大的生产环境优化 强大可自定义配置的拆包能力等决定了产物的性能 Rspack 解决了什么问题? ??? ♂️ 方便从原有方案（Webpack）迁移 用最小的成本优化巨型项目的开发体验 Rspack 解决了什么问题? ??? 社区现有方案往往能解决其中一两个问题， 但没有一个方案能解决所有问题 Rspack 有哪些特性？ ??? 快！ performance is the best feature

·业务开发者无需关注构建配置 ·统一团队构建脚本 ·构建配置合理的拆分 ·README 文档、ChangeLog 文档等 ·冒烟测试、单元测试、测试覆盖率 ·持续集成 构建配置管理的可选方案 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成 Code Review 的流程 良好的 Git commit 规范优势： ·根据 Git Commit 的元数据生成 Changelog ·后续维护者可以知道 Feature 被修改的原因 技术方案 提交格式要求 本地开发阶段增加 precommit 钩子 安装 husky 通过 commitmsg 钩子校验信息 npm install husky --save-dev "scripts":

indexOf） 默认使用更快的 md4 hash 算法 webpacks AST 可以直接从 loader 传递给 AST，减少解析时间 使用字符串方法替代正则表达式 多进程/多实例构建：资源并行解析可选方案 多进程/多实例：使用 HappyPack 解析资源 HappyPack工作流程 原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中 代码示例

cacheDirectory 将 babel-loader 编译的结果写进磁盘。 webpack 5 缓存策略 • 默认开启缓存，缓存默认是在内存⾥。可以对 cache 进⾏设置 。 • 缓存淘汰策略：⽂件缓存存储在 node_modules/.cache/webpack，最⼤ 500MB，缓存时常两个星期，旧的缓存先淘汰。 webpack 5 webpack 4 构建优化：Tree Shaking 优化-嵌套的