「大前端新趋势」专场 何庚坤 2023年05月28日 本期议题：Rspack 基于 Rust 的高性能 Web 构建工具 About me 何庚坤 字节跳动前端工程师 Rspack 团队成员 GitHub @ahabhgk 目录 1. Rspack 是什么？ 2. Rspack 解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？

关于 来源：https://github.com/nimojs/gulp-book gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 INSTALL 按钮下载安装 node。 使用终端/命令行 命令行 在 Windows 中可按 徽标键（alt键左边）+ R 打开输入 cmd + Enter 打开命令行。 终端(Mac) 打开 Launchpad（像火箭一样的图标），在屏幕上方搜索框中输入 终端 + Enter 打开终端。 查看 node 版本号 在终端/命令行中输入 node - v 检测node是否安装成功，安装成功会显示出 检测node是否安装成功，安装成功会显示出 node 的版本号。 跳转目录 终端/命令行 中可使用 cd 目录名 跳转至指定目录，Mac 中还可以使用 ls 查看当前目录下的文件列 表。 Windows Windows 下可使用如下命令跳转至指定目录： // 跳转至 C 盘根目录 cd c:\ // 跳转至当前目录的 demo 文件夹 cd demo // 跳转至上一级 cd .. Mac Mac

开始：从 webpack 命令行说起 ·开发环境： npm run dev 通过 npm scripts 运行 webpack ·生产环境：npm run build 通过 webpack 直接运行 ·webpack entry.js bundle.js 这个过程发生了 什么？ 查找 webpack 入口文件 在命令行运行以上命令后，npm会让命令行工具进入node_modules\ 启动后的结果 webpack 最终找到 webpack-cli (webpack-command) 这个 npm 包，并且 执行 CLI webpack-cli 做的事情 引入 yargs，对命令行进行定制 分析命令行参数，对各个参数进行转换，组成编译配置项 引用webpack，根据配置项进行编译和构建 从NON_COMPILATION_CMD分析出不需要编译的命令 const { NON_COMPILATION_ARGS //返回与本地环境相关的一些信息 ]; webpack-cli 提供的不需要编译的命令 命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类：

打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 为什什么需要构建⼯工具？ 转换 ES6 语法 转换 JSX 压缩混淆 ES6 module 主流浏览器器⽀支持情况 图⽚片压缩 CSS 前缀补全/预处理理器器 前端构建演变之路路 ant + YUI Tool

将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack