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.js 版本从 则现在既可以⽣成 ES5 ⼜可以⽣成 ES6/ES2015 代码。 两种设置⽅式：5 =< ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020 开创性的特性：模块联邦 发明者：Zack Jackson 基本解释：使 ⼀个JavaScript 应⽤在运⾏过程中可以动态加载另⼀个应⽤的代码，并⽀持共享依赖（CDN）。不再需要 本地安装 npm 包。 webpack 构建 • Host：依赖⽅，消费其他 Remote 的 webpack 构建 一个应用可以是 Host，也可以是 Remote，也可以同时是 Host 和 Remote。 开创性的特性：ModuleFederationPlugin 介绍 Webpack 内部通过 ModuleFederationPlugin 插件将多个应⽤结合起来。 • name：必须，唯⼀ ID，作为输出的模块名，使⽤的时通过

何庚坤 字节跳动前端工程师 Rspack 团队成员 GitHub @ahabhgk 目录 1. Rspack 是什么？ 2. Rspack 解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？ 5. Rspack 的架构设计 6. Rspack 的生态与未来 Rspack 是什么？ Rspack 是一个基于 Rust 的高性能构建引擎， Rspack 有哪些特性？ ??? 快！ performance is the best feature! Rspack 有哪些特性？ ??? Rust 实现核心部分，充分利用并发和 LTO 优化 Rspack 有哪些特性？ ???️ O(≈1) 增量 HMR，只编译修改的模块 Rspack 有哪些特性？ ⚡️ Dev 启动耗时 Rspack 有哪些特性？ 一些业务收益 Webpack 59s 9 倍 dev 243s 24s 10 倍 hmr 18s 1.4s 13 倍 Rspack 有哪些特性？ ??? 与 Webpack 部分兼容 The subset of Webpack! Rspack 有哪些特性？ ⚙️ 常用配置兼容 Rspack 有哪些特性？ ??? 常用 Loader 兼容 • babel-loader • style-loader • css-loader

行，默认300ms aggregateTimeout: 300, //判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的，默认每秒问1000次 poll: 1000 } } 热更更新：webpack-dev-server { "name": "hello-webpack", "version": "1.0.0", "description": "Hello webpack", "main": "author": "", "license": "ISC" } WDS 不不刷新浏览器器 WDS 不不输出⽂文件，⽽而是放在内存中 使⽤用 HotModuleReplacementPlugin插件 热更更新：使⽤用 webpack-dev-middleware const express = require('express'); const webpack = require('webpack'); 输出的⽂文件传输给服务器器 适⽤用于灵活的定制场景 热更更新的原理理分析 Webpack Compile: 将 JS 编译成 Bundle HMR Server: 将热更更新的⽂文件输出给 HMR Rumtime Bundle server: 提供⽂文件在浏览器器的访问 HMR Rumtime: 会被注⼊入到浏览器器， 更更新⽂文件的变化 bundle.js: 构建输出的⽂文件 什什么是⽂文件指纹？

·alpha：是内部测试版，一般不向外部发布，会有很多 Bug。一般只有测试人员使用。 ·beta：也是测试版，这个阶段的版本会一直加入新的功能。在 Alpha 版之后推出 ·rc：Release Candidate) 系统平台上就是发行候选版本。RC 版不会再加入新的功能了，主 要着重于除错。

Chunk 生成算法 1. webpack 先将 entry 中对应的 module 都生成一个新的 chunk 2. 遍历 module 的依赖列表，将依赖的 module 也加入到 chunk 中 3. 如果一个依赖 module 是动态引入的模块，那么就会根据这个 module 创建一个 新的 chunk，继续遍历依赖 4. 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性

stars 40766 11796 29427 周下载量量 3,385,392 478,876 816,228 为什什么选择 webpack? 社区⽣生态丰富 配置灵活和插件化扩展 官⽅方更更新迭代速度快 初识 webpack：配置⽂文件名称 可以通过 webpack --config 指定配置⽂文件 webpack 默认配置⽂文件：webpack.config.js 初识 webpack：webpack

//将所有的style标签合并成一个 } }, "css-loader", "sass-loader" ], }, ] }, }; 多⻚页⾯面应⽤用(MPA)概念 每⼀一次⻚页⾯面跳转的时候，后台服务器器都会给返回⼀一个新的 html ⽂文档， 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多⻚页应⽤用。 多⻚页⾯面打包基本思路路 module.exports = { entry: { index: './src/index

search, replace, distExt) 参数 参数 说明 说明 event gulp.watch 回调函数的 event search 需要被替换的起始字符串 replace 第三个参数是新的的字符串 distExt 扩展名(非必填) 此时编辑 src/js/log.js 文件并保存，命令行会出现消息，表示检测到 src/js/log.js 文件修改后只重新编 译 log.js 。