基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 2.0 - > 16.3.0 -> 16.3.1 软件的版本通常由三位组成，形如： X.Y.Z 在发布重要版本时，可以发布alpha, rc 等先行版本 alpha和rc等修饰版本的关键字后面可 以带上次数和meta信息 遵守 semver 规范的优势 优势： ·避免出现循环依赖 ·依赖冲突减少 语义化版本（Semantic Versioning）规范格式 次版本号：当你做了向下兼容的功能性新增，

腾讯IVWEB 程柳柳锋 扫码试看/订阅 《玩转 webpack》 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 __dirname + '/dist' } }; 通过占位符确保⽂文件名称的唯⼀一 核⼼心概念之 Loaders webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返回转换的结果。 常⻅见的 Loaders 有哪些？ Loaders 的⽤用法 module.export = { //默认 false，也就是不不开启 watch: true, //只有开启监听模式时，watchOptions才有意义 wathcOptions: { //默认为空，不监听的文件或者文件夹，支持正则匹配 ignored: /node_modules/, //监听到变化发生后会等300ms再去执行，默认300ms aggregateTimeout: 300, //

Web 商城项⽬目出发， 讲解 webpack 实际使⽤用 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 webpack-cli ·npm install webpack webpack-cli --save-dev ·检查是否安装成功：./node_modules/.bin/webpack -v 创建空⽬目录和 package.json ·mkdir my-project ·cd my-project ·npm init -y Webpack初体验：⼀一个最简单的例例⼦子 webpack 脚本

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 "css-loader", "sass-loader" ], }, ] }, }; 多⻚页⾯面应⽤用(MPA)概念 每⼀一次⻚页⾯面跳转的时候，后台服务器器都会给返回⼀一个新的 html ⽂文档， 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多⻚页应⽤用。 多⻚页⾯面打包基本思路路 module.exports = { entry: { index: './src/index.js', search: 使⽤用eval包裹模块代码 cheap: 不不包含列列信息 inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件 module:包含loader的sourcemap source map 类型 基础库分离 ·思路路：将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ·⽅方法：使⽤用 html-webpack- externals-plugin

-v 以确认安装成功。 至此，我们完成了准备工作。接着让 gulp 开始帮我们干活吧！ gulp 入门指南 - 4 - 本文档使用 看云 构建 使用 gulp 压缩 JS 压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压 缩工作。 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。 规律 找到 js/ 目录下的所有 after 2.85 ms 至此，我们完成了 gulp 压缩 js 文件的自动化代码编写。 注意： 注意：使用 gulp.watch 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通 过 Ctrl + C 停止 gulp。 Mac 下使用 control + C 停止 gulp 十、使用 gulp.task('default', fn) 定义默认任务 十、使用 gulp 文件的修改后压缩代码。但是还有还 有一些性能问题和缺少容错性，将在后面的章节详细说明。 gulp 入门指南 - 10 - 本文档使用 看云 构建 使用 gulp 压缩 CSS 压缩 css 代码可降低 css 文件大小，提高页面打开速度。 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件，压缩它们，将压缩后的文件存放在 dist/css/ 目录下。

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着 webpack 的插件系统。 Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子 Tapable hooks 类型 Tapable 的使用 -new Hook 新建钩子 Tapable 暴露出来的都是类方法，new 一个类方法获得我们需要的钩子 class 接受数组参数 options ，非必传。类方法会根据传参，接受同样数量的参数。

速度不受整个项目体积影响 bundless 的单文件粒度的缓存更优 打包速度的对⽐ bundle 依赖 sourcemap bundless 调试简单 以 webpack 里面的 sourcemap 类型举例 开发体验的对⽐ ⽬ 录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 Vite 构建速度快的原因 development.js" 相对路径转绝对路径，方便浏览器请求。 补齐文件扩展名和经常被省略的 index.xxx 如：import a from ’/src/a/index.js’ 给非 js 类型（js 类型：如 js(x)/ts(x)/vue）的文件地址加上 一个叫 “import” 的 query 参数。 如：import ‘/src/style.css?import’ 给 hmr 相关的请求地址添加时间戳，避免缓存。

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 可以处理多种图片格式 Imagemin的压缩原理 pngquant: 是一款PNG压缩器，通过将图像转换为具有alpha通道（通常比24/32位PNG 文件小60-80％）的更高效的8位PNG格式，可显著减小文件大小。 pngcrush:其主要目的是通过尝试不同的压缩级别和PNG过滤方法来降低PNG IDAT数据 流的大小。 optipng:其设计灵感来自于pngcrush。optipng可将图像文件重新压缩为更小尺寸，而不

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目

source-map-loader • node-loader • vue-loader (WIP，预计 0.2 支持) • …… Rspack 有哪些特性？ ??? 部分 Plugin 兼容/可替代 • html-webpack-plugin => @rspack/plugin-html or builtins.html • react-refresh-webpack-plugin =>