⽬ 录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 webpack 5 在 2020-10-10 正式发布 官方 changelog：https://webpack.js.org/blog/2020-10-10-webpack-5-release/ webpack 5 新特性概览 最低支持的 Node 版本：10.13.0 功能清除：清理弃⽤的能⼒ 所有在 webpack 4 里面被废弃的能力都被清除，因此需要确保 webpack4 没有打印警告。 require.includes 语法已被废弃 • 可以通过 Rule.parser.requireInclude 将⾏为改为允许、废弃或禁⽤。 webpack 5 webpack 4 之前的版本是：如果某个模块依赖 Node.js 里面 .com/webpack/node-libs-browser#readme ⻓期缓存：确定的模块 Id、chunk 和导出名称 在生产模式下，默认的 chunkIds: “deterministic”, moduleIds: “deterministic”。设置成 deterministic 时默认最小 3 位数字会被 使用 chunkIds moduleIds webpack 5 webpack

玩转 webpack 腾讯IVWEB 程柳柳锋 扫码试看/订阅 《玩转 webpack》 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 核⼼心概念之 Entry Entry ⽤用来指定 webpack 的打包⼊入⼝口 理理解依赖图的含义 依赖图的⼊入⼝口是 entry 对于⾮非代码⽐比如图⽚片、字体依赖也会 不不断加⼊入到依赖图中 Entry 的⽤用法 module { entry: { app: './src/app.js', adminApp: './src/adminApp.js' } }; 核⼼心概念之 Output Output ⽤用来告诉 webpack 如何将编译后的⽂文件输出到磁盘 Output 的⽤用法：单⼊入⼝口配置 module.exports = { entry: './path/to/my/entry/file.js' output:

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 ������� ����������� 当前构建时的问题 每次构建的时候不不会清理理⽬目录，造成构建的输出⽬目录 output ⽂文件越来越多 通过 npm scripts 清理理构建⽬目录 rm -rf ./dist && webpack rimraf ./dist && webpack ⾃自动清理理构建⽬目录 module __dirname + '/dist' }, plugins: [ + new CleanWebpackPlugin() }; 避免构建前每次都需要⼿手动删除 dist 使⽤用 clean-webpack-plugin ·默认会删除 output 指定的输出⽬目录 CSS3 的属性为什什么需要前缀？ Trident(-ms) Geko(-moz) Webkit(-webkit) Presto(-o)

玩转 webpack 腾讯IVWEB 程柳柳锋 扫码试看/订阅 《玩转 webpack》 课程介绍 框架 DSL 解析 Web 应⽤用多元化 组件化 内容综述 基础篇 P1-P3 进阶篇 P4-P5 原理理篇 P6-P7 实战篇 P8 webpack 的基本概念和⽇日常 开发的实⽤用技巧 以⼯工程化的⽅方式组织 webpack 构 建配置，和 webpack 打包优化 详细剖析 详细剖析 webpack 打包原理理 和插件、Loader 的实现 从实际 Web 商城项⽬目出发， 讲解 webpack 实际使⽤用 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 为什什么需要构建⼯工具？ 转换 ES6 语法 转换 JSX 压缩混淆 ES6 module 主流浏览器器⽀支持情况 图⽚片压缩 CSS 前缀补全/预处理理器器 前端构建演变之路路 ant

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 08 基础篇：webpack 进阶用法 03 开始：从 webpack 命令行说起 ·开发环境： npm run dev 通过 npm scripts 运行 webpack ·生产环境：npm run build 通过 webpack 直接运行 ·webpack entry.js bundle.js 这个过程发生了 什么？ 查找 webpack 入口文件 在命令行运行以上命令后， 在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目录 查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不 存在，就抛出错误。 实际的入口文件是：node_modules\webpack\bin\webpack.js 分析 webpack 的入口文件：webpack.js process.exitCode = 0;

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 08 基础篇：webpack 进阶用法 03 stats: 构建的统计信息 package.json 中使用 stats 初级分析：使用 webpack 内置的 stats Node.js 中使用 颗粒度太粗, 看不出问题所在 速度分析：使用 speed-measure-webpack-plugin 可以看到每个 loader 和插件执行耗时 代码示例 速度分析插件作用 分析整个打包总耗时 分析整个打包总耗时 每个插件和loader的耗时情况 webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for of 替代

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 08 基础篇：webpack 进阶用法 03 构建配置抽离成 npm 包的意义 可维护性 通用性 质量 ·业务开发者无需关注构建配置 ·统一团队构建脚本 ·构建配置合理的拆分 ·README 文档、ChangeLog 文档等 ·冒烟测试、单元测试、测试覆盖率 ·持续集成 构建配置管理的可选方案 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 配置 抽离成一个 npm 包统一管理 ·开发环境：webpack.dev.js ·生产环境：webpack.prod.js

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型 前端 后端 商城架构设计 平台层 ⾸首⻚页 列列表⻚页 购物⻋车⻚页 商品管理理 订单管理理 ⽤用户端 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 ⽀支付服务 评论服务 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 、react-redux npm i react react-dom redux react-redux -S · 安装 geektime-builder-webpack npm i geektime-builder-webpack -D 安装依赖 · 安装 @babel/core npm i @babel/core -D · actions 和 reducers src/actions/

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 08 基础篇：webpack 进阶用法 03 一个最简单的 loader 代码结构 module.exports = function(source) { return source; }; 定义：loader 只是一个导出为函数的 JavaScript 模块 多 Loader 时的执行顺序 多个 Loader 串行执行 顺序从后到前 module.exports = ' less-loader' + ] + } + ] + } }; 函数组合的两种情况 Unix 中的 pipline Compose(webpack采取的是这种) compose = (f, g) => (...args) => f(g(...args)); 通过一个例子验证 loader 的执行顺序 module.exports =

解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？ 5. Rspack 的架构设计 6. Rspack 的生态与未来 Rspack 是什么？ Rspack 是一个基于 Rust 的高性能构建引擎， 具备与 Webpack 生 态系统的互操作性，可以从 Webpack 低成本的迁移，并提供更好 的构建性能。 https://www 开发场景，能够应对各种场景 Rspack 解决了什么问题? ??? 强大的生产环境优化 强大可自定义配置的拆包能力等决定了产物的性能 Rspack 解决了什么问题? ??? ♂️ 方便从原有方案（Webpack）迁移 用最小的成本优化巨型项目的开发体验 Rspack 解决了什么问题? ??? 社区现有方案往往能解决其中一两个问题， 但没有一个方案能解决所有问题 Rspack 有哪些特性？ 一些业务收益 Webpack Rspack 提升 build 380s 28s 13 倍 dev 368s 25s 14 倍 hmr 21s 1s 21 倍 Webpack Rspack 提升 build 508s 59s 9 倍 dev 243s 24s 10 倍 hmr 18s 1.4s 13 倍 Rspack 有哪些特性？ ??? 与 Webpack 部分兼容 The