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 版本从 版本从 6 增加到 10.13.0 最⼩ Node.js 版本：10.13.0 功能清除：清理弃⽤的能⼒ 所有在 webpack 4 里面被废弃的能力都被清除，因此需要确保 webpack4 没有打印警告。 require.includes 语法已被废弃 • 可以通过 Rule.parser.requireInclude 将⾏为改为允许、废弃或禁⽤。 webpack 5 webpack webpack 4 之前的版本是：如果某个模块依赖 Node.js 里面的核心模块，那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。 功能清除：不再为 Node.js 模块引⼊ polyfill 功能清除：不再为 Node.js 模块引⼊ polyfill node-libs-browser：https://github.com/webpack/node-libs-browser#readme

何庚坤 字节跳动前端工程师 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

} ... ) { a: [ 1, 2 ], b: 10, c: 20, d: 421 } 合并配置：module.exports = merge(baseConfig, devConfig); 功能模块设计 目录结构设计 + |- /test + |- /lib + |- webpack.dev.js + |- webpack.prod.js + |- webpack 试之前而进行的预测试，这种 预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。 冒烟测试执行 ·是否有 JS、CSS 等静态资源文件 每次构建完成 build 目录是否有内容输出 ·是否有 HTML 文件 构建是否成功 判断构建是否成功 在示例项目里面运行构建，看看是否有报错 判断基本功能是否正常 ·是否有 JS、CSS 等静态资源文件 编写 mocha 测试用例 以带上次数和meta信息 遵守 semver 规范的优势 优势： ·避免出现循环依赖 ·依赖冲突减少 语义化版本（Semantic Versioning）规范格式 次版本号：当你做了向下兼容的功能性新增， 主版本号：当你做了不兼容的 API 修改， 修订号：当你做了向下兼容的问题修正。 先行版本号 先行版本号可以作为发布正式版之前的版本，格式是在修订版本号后面加上一个连接 号（-），再加上一连串以点（

·⽤用户注册(POST)：/user/register ·⽤用户登陆(GET)：/user/login 登陆注册模块开发 JSON Web Token ⼯工作原理理 登陆注册模块开发 - 注册功能 · 注册 API (POST): http://127.0.0.1:8001/api/v1/user/register curl -X POST -d "username=test&pas "username=test&password=123456&email=test@qq.com" "http://127.0.0.1:8001/api/v1/user/register" · 注册截图 登陆注册模块开发 - 登录功能 · 登陆 API (POST): http://127.0.0.1:8001/api/v1/user/login curl -X POST -d "username=test&password=123456" ⾸首⻚页、列列表⻚页、详情⻚页采⽤用 SSR 或者 Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端： · 服务端： · MVC 开发⽅方式，数据库基于 Sequelize · Rest API ⻛风格 ·采⽤用 JWT 进⾏行行鉴权 ·组件化，组件颗粒度尽可能⼩小

⽤用来指定当前的构建环境是：production、development 还是 none 设置 mode 可以使⽤用 webpack 内置的函数，默认值为 production Mode 的内置函数功能 资源解析：解析 ES6 const path = require('path'); module.exports = { entry: './src/index.js', output: {

) }; 代码分割的意义 对于⼤大的 Web 应⽤用来讲，将所有的代码都放在⼀一个⽂文件中显然是不不够有效的，特别是当你的 某些代码块是在某些特殊的时候才会被使⽤用到。webpack 有⼀一个功能就是将你的代码库分割成 chunks（语块），当代码运⾏行行到需要它们的时候再进⾏行行加载。 适⽤用的场景： 抽离相同代码到⼀一个共享块 脚本懒加载，使得初始下载的代码更更⼩小 懒加载 JS

gulp 入门指南 - 16 - 本文档使用 看云 构建 使用 gulp 编译 LESS Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能， 让 CSS 更易维护。 安装 npm install gulp-less 基本用法 你可以 下载所有示例代码 - 或在线查看代码 // 获取 gulp var gulp = require('gulp')