进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型 前端 后端 商城架构设计 平台层 ⾸首⻚页 列列表⻚页 ·修改商品(PUT)： /goods/:id ·⽤用户注册(POST)：/user/register ·⽤用户登陆(GET)：/user/login 登陆注册模块开发 JSON Web Token ⼯工作原理理 登陆注册模块开发 - 注册功能 · 注册 API (POST): http://127.0.0.1:8001/api/v1/user/register curl -X POST 登陆注册模块开发 - 登录功能 · 登陆 API (POST): http://127.0.0.1:8001/api/v1/user/login curl -X POST -d "username=test&password=123456" "http://127.0.0.1:8001/api/v1/user/login" · 登录截图 商品模块开发 商品模块开发 - 创建商品

关于 来源：https://github.com/nimojs/gulp-book gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 a{ color: red; } gulp 入门指南 - 18 - 本文档使用 看云 构建 使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发， 变得简单和可维护。 本章使用 ruby-sass 编译 css,若你没有安装 ruby 和 sass 请移步 使用ruby.taobao安装 Sass gulp --save-dev 此时打开 package.json 会发现多了如下代码 "devDependencies": { "gulp": "^3.8.11" } 声明此项目的开发依赖 gulp 接着安装其他依赖： 安装模块较多，请耐心等待，若一直安装失败可使用npm.taobao.org npm install gulp-uglify gulp-watch-path stream-combiner2

解决了什么问题? ???️ 开发环境性能 巨型项目中 Dev 启动时间 5-10 分钟，HMR 时间 10-20 秒， 甚至更久，开发体验极差 Rspack 解决了什么问题? ??? 生产环境性能 巨型项目中 Build 时间 10-20 分钟，甚至更久，拖慢 CI/CD 效率 Rspack 解决了什么问题? ??? 灵活丰富的配置 不止覆盖 Web 开发场景，能够应对各种场景 Rspack 解决了什么问题? ??? 强大的生产环境优化 强大可自定义配置的拆包能力等决定了产物的性能 Rspack 解决了什么问题? ??? ♂️ 方便从原有方案（Webpack）迁移 用最小的成本优化巨型项目的开发体验 Rspack 解决了什么问题? ??? 社区现有方案往往能解决其中一两个问题， 但没有一个方案能解决所有问题 Rspack 有哪些特性？ ??? 快！ performance is 持续优化构建性能 感谢 ??? Rspack 的实现离不开以下项目 ??? 了解更多 • 官方文档 (rspack.dev) • GitHub (web-infra-dev/rspack) • 开发指南 (web-infra-dev.github.io/rspack-dev-guide) THANKS

进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 一个最简单的 loader 代码结构 module.exports = function(source) { return source; 定义：loader-runner 允许你在不安装 webpack 的情 况下运行 loaders ·作为 webpack 的依赖，webpack 中使用它执行 loader ·进行 loader 的开发和调试 作用： loader-runner 的使用 import { runLoaders } from "loader-runner"; runLoaders({ resource: // 读取资源的函数 }, function(err, result) { // err: Error? // result.result: Buffer | String }) 开发一个 raw-loader src/raw-loader.js: module.exports = function(source) { const json = JSON.stringify(source)

进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 ������� ����������� 当前构建时的问题 每次构建的时候不不会清理理⽬目录，造成构建的输出⽬目录 output ⽂文件越来越多 /src/search/index.js ‘ } }; · entry: glob.sync(path.join(__dirname, './src/*/index.js')), 使⽤用 source map 开发环境开启，线上环境关闭 作⽤用：通过 source map 定位到源代码 · 线上排查问题的时候可以将 sourcemap 上传到错误监控系统 · source map科普⽂文：http://www 不不重复造轮⼦子，基于 eslint:recommend 配置并 改进 帮助保持团队的代码⻛风格统⼀一，⽽而不不是限制开发 体验 ESLint 如何执⾏行行落地？ 和 CI/CD 系统集成 和 webpack 集成 ⽅方案⼀一：webpack 与 CI/CD 集成 增加 lint pipline 本地开发阶段增加 precommit 钩⼦子 安装 husky 增加 npm script，通过 lint-staged

原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 构建配置抽离成 npm 包的意义 可维护性 通用性 质量 ·业务开发者无需关注构建配置 ·统一团队构建脚本 ·构建配置合理的拆分 ·README 文档、ChangeLog 文档等 ·冒烟测试、单元测试、测试覆盖率 kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 配置 抽离成一个 npm 包统一管理 ·开发环境：webpack.dev.js ·生产环境：webpack.prod.js ·规范：Git commit日志、README、ESLint 规范、Semver 规范 ·质量：冒烟测试、单元测试、测试覆盖率和 良好的 Git commit 规范优势： ·根据 Git Commit 的元数据生成 Changelog ·后续维护者可以知道 Feature 被修改的原因 技术方案 提交格式要求 本地开发阶段增加 precommit 钩子 安装 husky 通过 commitmsg 钩子校验信息 npm install husky --save-dev "scripts": { "commitmsg":

原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 开始：从 webpack 命令行说起 ·开发环境： npm run dev 通过 npm scripts 运行 webpack ·生产环境：npm run build 通过 webpack 是动态引入的模块，那么就会根据这个 module 创建一个 新的 chunk，继续遍历依赖 4. 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性 传统的网页开发转变成 Web Apps 开发 代码复杂度在逐步增高 部署时希望把代码优化成几个 HTTP 请求 分离的 JS文件/模块，便于后续代码的维护性 常见的几种模块化方式 CJS ES module AMD

课程介绍 框架 DSL 解析 Web 应⽤用多元化 组件化 内容综述 基础篇 P1-P3 进阶篇 P4-P5 原理理篇 P6-P7 实战篇 P8 webpack 的基本概念和⽇日常 开发的实⽤用技巧 以⼯工程化的⽅方式组织 webpack 构 建配置，和 webpack 打包优化 详细剖析 webpack 打包原理理 和插件、Loader 的实现 从实际 Web 商城项⽬目出发， 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 为什什么需要构建⼯工具？ 转换 ES6 语法 转换 JSX 压缩混淆 ES6 module 主流浏览器器⽀支持情况 图⽚片压缩

进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 stats: 构建的统计信息 package.json 中使用 stats 初级分析：使用 webpack 内置的 stats Node

速度不受整个项目体积影响 bundless 的单文件粒度的缓存更优 打包速度的对⽐ bundle 依赖 sourcemap bundless 调试简单 以 webpack 里面的 sourcemap 类型举例 开发体验的对⽐ ⽬ 录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 Vite 构建速度快的原因 预构建使用