进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 一个最简单的 loader 代码结构 module.exports = function(source) { result.image; result.coordinates; result.properties; }); 插件的运行环境 插件没有像 loader 那样的独立运行环境 只能在 webpack 里面运行 插件的基本结构 基本结构： 插件使用： plugins: [ new MyPlugin() ] class MyPlugin { apply(compiler) MyPlugin; 插件名称 插件上的 apply 方法 插件的 hooks 插件处理逻辑 ······························ ···· ······························ ··· · ················ ·· ························· ··· 搭建插件的运行环境 const

是什么？ 2. Rspack 解决了什么问题？ 3. Rspack 有哪些特性？ 4. 如何从 Webpack 迁移到 Rspack？ 5. Rspack 的架构设计 6. Rspack 的生态与未来 Rspack 是什么？ Rspack 是一个基于 Rust 的高性能构建引擎， 具备与 Webpack 生 态系统的互操作性，可以从 Webpack 低成本的迁移，并提供更好 的构建性能。 ion-showcase/pulls Rspack 架构设计 ??? 核心架构脱胎于 Webpack5 Rspack 的生态与未来 Rspack 的生态与未来 1. 支持更多常用框架：Vue、Qwik 等 2. 完善插件 API，兼容更多 Webpack 生态 3. 支持 Module Federation 模块联邦 4. 支持 Lazy Compilation 懒编译 5. 支持

实战篇 P8 webpack 的基本概念和⽇日常 开发的实⽤用技巧 以⼯工程化的⽅方式组织 webpack 构 建配置，和 webpack 打包优化 详细剖析 webpack 打包原理理 和插件、Loader 的实现 从实际 Web 商城项⽬目出发， 讲解 webpack 实际使⽤用 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 为什什么需要构建⼯工具？ 转换 ES6 语法 转换 JSX 压缩混淆 2013.7 GitHub stars 40766 11796 29427 周下载量量 3,385,392 478,876 816,228 为什什么选择 webpack? 社区⽣生态丰富 配置灵活和插件化扩展 官⽅方更更新迭代速度快 初识 webpack：配置⽂文件名称 可以通过 webpack --config 指定配置⽂文件 webpack 默认配置⽂文件：webpack.config

进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 开始：从 webpack 命令行说起 ·开发环境： npm run dev 对象，然后执行构建流程 webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options Webpack 的本质 Webpack可以将其理解是一种基于事件流的编程范例，一系列的插件运行。 先看一段代码 class Compiler extends Tapable { // ... } class Compilation extends Tapable { require("tapable"); Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着 webpack 的插件系统。 Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子 Tapable hooks 类型 Tapable 的使用 -new Hook 新建钩子 Tapable 暴露出来的都是类方法，new 一个类方法获得我们需要的钩子

进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 stats: 构建的统计信息 package.json 中使用 stats Node.js 中使用 颗粒度太粗, 看不出问题所在 速度分析：使用 speed-measure-webpack-plugin 可以看到每个 loader 和插件执行耗时 代码示例 速度分析插件作用 分析整个打包总耗时 每个插件和loader的耗时情况 webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ webpack 解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 多进程/多实例：并行压缩 方法一：使用 parallel-uglify-plugin 插件 多进程/多实例：并行压缩 方法二：uglifyjs-webpack-plugin 开启 parallel 参数 多进程/多实例：并行压缩 方法三：terser-webpack-plugin

进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 ������� ����������� 当前构建时的问题 每次构建 border-radius: 10px; } 如何在编写 CSS 不不需要添加前缀？ PostCSS 插件 autoprefixer ⾃自动补⻬齐 CSS3 前缀 根据 Can I Use 规则（ https://caniuse.com/ ） 使⽤用 autoprefixer 插件 module.exports = { module: { rules: [ { test: /\.less$/ html-webpack- externals-plugin 利利⽤用 SplitChunksPlugin 进⾏行行公共脚本分离 Webpack4 内置的，替代CommonsChunkPlugin插件 chunks 参数说明： module.exports = { optimization: { splitChunks: { chunks: 'async', minSize: 30000, maxSize:

进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 核⼼心概念之 Entry Entry ⽤用来指定 webpack 的打包⼊入⼝口 [ { test: /\.txt$/, use: 'raw-loader' } ] } }; test 指定匹配规则 use 指定使⽤用的 loader 名称 核⼼心概念之 Plugins 插件⽤用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入 作⽤用于整个构建过程 常⻅见的 Plugins 有哪些？ Plugins 的⽤用法 const path = require('path'); "author": "", "license": "ISC" } WDS 不不刷新浏览器器 WDS 不不输出⽂文件，⽽而是放在内存中 使⽤用 HotModuleReplacementPlugin插件 热更更新：使⽤用 webpack-dev-middleware const express = require('express'); const webpack = require('webpack');

进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型

进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 构建配置抽离成 npm 包的意义 可维护性 通用性 质量 ·业务开发者无需关注构建配置

Remote，也可以同时是 Host 和 Remote。 开创性的特性：ModuleFederationPlugin 介绍 Webpack 内部通过 ModuleFederationPlugin 插件将多个应⽤结合起来。 • name：必须，唯⼀ ID，作为输出的模块名，使⽤的时通过 ${name}/${expose} 的⽅式使⽤ • library：必须，其中这⾥的 name 为作为 umd