基础篇：webpack 进阶用法 03 构建配置抽离成 npm 包的意义 可维护性 通用性 质量 ·业务开发者无需关注构建配置 ·统一团队构建脚本 ·构建配置合理的拆分 ·README 文档、ChangeLog 文档等 ·冒烟测试、单元测试、测试覆盖率 ·持续集成 构建配置管理的可选方案 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks "node": true } }; 冒烟测试 (smoke testing) 冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种 预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。 冒烟测试执行 ·是否有 JS、CSS 等静态资源文件 每次构建完成 build 目录是否有内容输出 ·是否有 HTML 文件 构建是否成功 判断构建是否成功 yml 文件内容 install 安装项目依赖 script 运行测试用例 发布到 npm 添加用户： npm adduser 升级补丁版本号：npm version patch 升级版本 升级小版本号：npm version minor 升级大版本号：npm version major 发布版本：npm publish Git 规范和 Changelog 生成 ·加快 Code

代码执行结果 代码执行后文件结构 └── js/ │ └── a.js └── dist/ └── js/ └── a.js gulp 入门指南 - 1 - 本文档使用 看云 构建 a.js 压缩前 function demo (msg) { alert('--------\r\n' + msg + '\r\n--------') } demo('Hi') 文件都是压缩后的版本。 你还可以监控 js/ 目录下的 js 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它 帮助你自动构建 Web 项目。 gulp 还可以做很多事，例如： 1. 压缩CSS 2. 压缩图片 3. 编译Sass/LESS 4. 编译CoffeeScript 5. markdown 转换为 html gulp 入门指南 - 2 - 本文档使用 看云 终端(Mac) 打开 Launchpad（像火箭一样的图标），在屏幕上方搜索框中输入 终端 + Enter 打开终端。 查看 node 版本号 在终端/命令行中输入 node - v 检测node是否安装成功，安装成功会显示出 node 的版本号。 跳转目录 终端/命令行 中可使用 cd 目录名 跳转至指定目录，Mac 中还可以使用 ls 查看当前目录下的文件列 表。 Windows

}, "css-loader", "sass-loader" ], }, ] }, }; 多⻚页⾯面应⽤用(MPA)概念 每⼀一次⻚页⾯面跳转的时候，后台服务器器都会给返回⼀一个新的 html ⽂文档， 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多⻚页应⽤用。 多⻚页⾯面打包基本思路路 module.exports = { entry: { index: './src/index.js', 代码分割的效果 ESLint 的必要性 2017年年4⽉月13⽇日，腾讯⾼高级⼯工程师⼩小明在做充值业务时，修改了了苹果 iap ⽀支付配 置，将 JSON 配置增加了了重复的 key 。代码发布后，有⼩小部分使⽤用了了 vivo ⼿手 机的⽤用户反馈充值⻚页⾯面⽩白屏，⽆无法在 Now app 内进⾏行行充值。最后问题定位是： vivo ⼿手机使⽤用了了系统⾃自带的 webview ⽽而没有使⽤用 eslint-loader，构建时检查 JS 规范 webpack 打包库和组件 webpack 除了了可以⽤用来打包应⽤用，也可以⽤用来打包 js 库 实现⼀一个⼤大整数加法库的打包 · 需要打包压缩版和⾮非压缩版本 ·⽀支持 AMD/CJS/ESM 模块引⼊入 库的⽬目录结构和打包要求 + |- /dist + |- large-number.js + |- large-number.min

的构建原理 03 webpack 5 在 2020-10-10 正式发布 官方 changelog：https://webpack.js.org/blog/2020-10-10-webpack-5-release/ webpack 5 新特性概览 最低支持的 Node.js 版本从 6 增加到 10.13.0 最⼩ Node.js 版本：10.13.0 功能清除：清理弃⽤的能⼒ 所有在 webpack require.includes 语法已被废弃 • 可以通过 Rule.parser.requireInclude 将⾏为改为允许、废弃或禁⽤。 webpack 5 webpack 4 之前的版本是：如果某个模块依赖 Node.js 里面的核心模块，那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。 功能清除：不再为 Node.js 模块引⼊ polyfill webpack 4 构建速度对⽐ ⽬ 录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 Vite 发布 2.0 版本 更早实践 bundless 的⼯具：Snowpack 真的可以不⽤打包吗？ 浏览器对 ESM 的⽀持情况 各浏览器在 HTTP/1.1 协议下的最大并行请求数限制 HTTP/1.1

"migrate", //进行 webpack 版本迁移 "add", //往 webpack options: 解析参数(alias 和 解析的文件后缀设置) ·Optimizing options: 优化参数 ·Stats options: 统计参数 ·options: 通用参数(帮助命令、版本信息等) webpack-cli 执行的结果 最终会根据配置参数实例化 webpack 对象，然后执行构建流程 webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options //异步串行流水钩子 } = require("tapable"); Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着 webpack 的插件系统。 Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子 Tapable hooks 类型 Tapable 的使用 -new Hook

webpack? webpack grunt gulp 定义 Module bundler Task runner Task runner 语⾔言 JavaScript Node.js Node.js 发布时间 2012.3 2012.6 2013.7 GitHub stars 40766 11796 29427 周下载量量 3,385,392 478,876 816,228 为什什么选择 webpack

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

webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes