前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 现有目录结构如下： └── js/ └── a.js 规律 1. 找到 js/目录下的所有 .js 文件 2. 压缩这些 js 文件 3. 将压缩后的代码另存在 dist/js/ 目录下 编写 .pipe(gulp.dest('dist/js')); }); 代码执行结果 代码执行后文件结构 └── js/ │ └── a.js └── dist/ └── js/ └── a.js gulp 入门指南 - 1 - 本文档使用 看云 构建 a.js 压缩前 function demo (msg) { alert('--------\r\n' 还可以做很多事，例如： 1. 压缩CSS 2. 压缩图片 3. 编译Sass/LESS 4. 编译CoffeeScript 5. markdown 转换为 html gulp 入门指南 - 2 - 本文档使用 看云 构建 安装 Node 和 gulp gulp 是基于 node 实现的，那么我们就需要先安装 node。 Node 是一个基于Chrome JavaScript V8引擎建立的一个平台，可以利用它实现

基础篇：webpack 进阶用法 03 构建配置抽离成 npm 包的意义 可维护性 通用性 质量 ·业务开发者无需关注构建配置 ·统一团队构建脚本 ·构建配置合理的拆分 ·README 文档、ChangeLog 文档等 ·冒烟测试、单元测试、测试覆盖率 ·持续集成 构建配置管理的可选方案 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks a: [ 1, 2 ], b: 10, c: 20, d: 421 } 合并配置：module.exports = merge(baseConfig, devConfig); 功能模块设计 目录结构设计 + |- /test + |- /lib + |- webpack.dev.js + |- webpack.prod.js + |- webpack.ssr.js +

}, "css-loader", "sass-loader" ], }, ] }, }; 多⻚页⾯面应⽤用(MPA)概念 每⼀一次⻚页⾯面跳转的时候，后台服务器器都会给返回⼀一个新的 html ⽂文档， 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多⻚页应⽤用。 多⻚页⾯面打包基本思路路 module.exports = { entry: { index: './src/index.js', webpack 除了了可以⽤用来打包应⽤用，也可以⽤用来打包 js 库 实现⼀一个⼤大整数加法库的打包 · 需要打包压缩版和⾮非压缩版本 ·⽀支持 AMD/CJS/ESM 模块引⼊入 库的⽬目录结构和打包要求 + |- /dist + |- large-number.js + |- large-number.min.js + |- webpack.config.js + |-

打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 一个最简单的 loader 代码结构 module.exports = function(source) { return source; }; 定义：loader 只是一个导出为函数的 JavaScript 模块 多 result.coordinates; result.properties; }); 插件的运行环境 插件没有像 loader 那样的独立运行环境 只能在 webpack 里面运行 插件的基本结构 基本结构： 插件使用： plugins: [ new MyPlugin() ] class MyPlugin { apply(compiler) { compiler.hooks.done

AST 基础知识 抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是 源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都 表示源代码中的一种结构。 在线demo: https://esprima.org/demo/parse.html 复习一下 webpack 的模块机制 · 打包出来的是一个 IIFE

5. 支持 Persistent Cache 持久缓存 6. 更多生产环境优化策略 7. 持续优化构建性能 感谢 ??? Rspack 的实现离不开以下项目 ??? 了解更多 • 官方文档 (rspack.dev) • GitHub (web-infra-dev/rspack) • 开发指南 (web-infra-dev.github.io/rspack-dev-guide) THANKS