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 webpack 4 之前的版本是：如果某个模块依赖 Node.js 里面的核心模块，那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。 功能清除：不再为 Node.js 模块引⼊ polyfill 功能清除：不再为 Node.js 模块引⼊ polyfill node-libs-browser：https://github.com/webpack/node-libs-browser#readme serveStaticPlugin 将整个项目根目录 、Public 目录设置为静态目录。 serveStaticPlugin 利用 koa-etag 中间件打 etag devServer 具备静态文件服务功能 Vite 打包流程 – 静态⽂件托管服务 文件路径：src/node/server/index.ts 处理裸导⼊（bare import）的模块路径，eg: import react from

gulp 入门指南 - 16 - 本文档使用 看云 构建 使用 gulp 编译 LESS Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能， 让 CSS 更易维护。 安装 npm install gulp-less 基本用法 你可以 下载所有示例代码 - 或在线查看代码 // 获取 gulp var gulp = require('gulp') distExt) 参数 参数 说明 说明 event gulp.watch 回调函数的 event search 需要被替换的起始字符串 replace 第三个参数是新的的字符串 distExt 扩展名(非必填) 此时编辑 src/js/log.js 文件并保存，命令行会出现消息，表示检测到 src/js/log.js 文件修改后只重新编 译 log.js 。 [21:47:25] changed

compilation.assets[name] = new RawSource("demo"); cb(); }); } }; 插件扩展：编写插件的插件 插件自身也可以通过暴露 hooks 的方式进行自身扩展，以 html- webpack-plugin 为例： ·html-webpack-plugin-alter-chunks (Sync) ·html-webp

} ... ) { 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 进⾏行行鉴权 ·组件化，组件颗粒度尽可能⼩小

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

配置相关参数(文件名称、运行环境等) ·Basic options: 基础参数(entry设置、debug模式设置、watch监听设置、devtool设置) ·Module options: 模块参数，给 loader 设置扩展 ·Output options: 输出参数(输出路径、输出文件名称) ·Advanced options: 高级用法(记录设置、缓存设置、监听频率、bail等) ·Resolving options:

证产物的正确性，Rspack 默认开启了对配置的严格校验 如何从 Webpack 迁移到 Rspack？ ??? Rust is faster than JavaScript • 优先使用内置功能 • SWC > babel-loader，Rspack 使用 SWC 编译 JavaScript 代码 • experiments.css > style-loader + css-loader，Rspack

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

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