进阶篇：编写可维护的 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

进阶篇：编写可维护的 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:

实战篇 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 压缩混淆 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 核⼼心概念之 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》视频课程 商城技术栈选型

lls Rspack 架构设计 ??? 核心架构脱胎于 Webpack5 Rspack 的生态与未来 Rspack 的生态与未来 1. 支持更多常用框架：Vue、Qwik 等 2. 完善插件 API，兼容更多 Webpack 生态 3. 支持 Module Federation 模块联邦 4. 支持 Lazy Compilation 懒编译 5. 支持 Persistent Cache

进阶篇：编写可维护的 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