webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 构建配置抽离成 npm 包的意义 可维护性 通用性 质量 ·业务开发者无需关注构建配置 ·统一团队构建脚本 ·统一团队构建脚本 ·构建配置合理的拆分 ·README 文档、ChangeLog 文档等 ·冒烟测试、单元测试、测试覆盖率 ·持续集成 构建配置管理的可选方案 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app eact-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 配置 抽离成一个 npm 包统一管理 ·开发环境：webpack.dev.js ·生产环境：webpack.prod.js ·规范：Git commit日志、README、ESLint 规范、Semver 规范 ·质量：冒烟测试、单元测试、测试覆盖率和

进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 开始：从 webpack 命令行说起 ·开发环境： npm run dev 通过 通过 npm scripts 运行 webpack ·生产环境：npm run build 通过 webpack 直接运行 ·webpack entry.js bundle.js 这个过程发生了 什么？ 查找 webpack 入口文件 在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目录 查找是否存在 webpack.sh 或者 webpack.cmd (webpack-command) 这个 npm 包，并且 执行 CLI webpack-cli 做的事情 引入 yargs，对命令行进行定制 分析命令行参数，对各个参数进行转换，组成编译配置项 引用webpack，根据配置项进行编译和构建 从NON_COMPILATION_CMD分析出不需要编译的命令 const { NON_COMPILATION_ARGS } = require("./utils/constants");

Rspack 解决了什么问题? ???️ 开发环境性能 巨型项目中 Dev 启动时间 5-10 分钟，HMR 时间 10-20 秒， 甚至更久，开发体验极差 Rspack 解决了什么问题? ??? 生产环境性能 巨型项目中 Build 时间 10-20 分钟，甚至更久，拖慢 CI/CD 效率 Rspack 解决了什么问题? ??? 灵活丰富的配置 不止覆盖 Web 开发场景，能够应对各种场景 开发场景，能够应对各种场景 Rspack 解决了什么问题? ??? 强大的生产环境优化 强大可自定义配置的拆包能力等决定了产物的性能 Rspack 解决了什么问题? ??? ♂️ 方便从原有方案（Webpack）迁移 用最小的成本优化巨型项目的开发体验 Rspack 解决了什么问题? ??? 社区现有方案往往能解决其中一两个问题， 但没有一个方案能解决所有问题 Rspack 有哪些特性？ ??? hmr 18s 1.4s 13 倍 Rspack 有哪些特性？ ??? 与 Webpack 部分兼容 The subset of Webpack! Rspack 有哪些特性？ ⚙️ 常用配置兼容 Rspack 有哪些特性？ ??? 常用 Loader 兼容 • babel-loader • style-loader • css-loader • postcss-loader

webpack 构 建配置，和 webpack 打包优化 详细剖析 webpack 打包原理理 和插件、Loader 的实现 从实际 Web 商城项⽬目出发， 讲解 webpack 实际使⽤用 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 816,228 为什什么选择 webpack? 社区⽣生态丰富 配置灵活和插件化扩展 官⽅方更更新迭代速度快 初识 webpack：配置⽂文件名称 可以通过 webpack --config 指定配置⽂文件 webpack 默认配置⽂文件：webpack.config.js 初识 webpack：webpack 配置组成 module.exports = { entry: './src/index plugins: [ new HtmlwebpackPlugin({ template: './src/index.html’ }) ] }; 打包的⼊入⼝口⽂文件 打包的输出 环境 Loader 配置 插件配置 ·································· ································· ·····································

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 exports = { entry: { index: './src/index.js', search: './src/search.js ‘ } }; 缺点：每次新增或删除⻚页⾯面需要改 webpack 配置 每个⻚页⾯面对应⼀一个 entry，⼀一个 html-webpack-plugin 多⻚页⾯面打包通⽤用⽅方案 动态获取 entry 和设置 html-webpack-plugin 数量量 /src/search/index.js ‘ } }; · entry: glob.sync(path.join(__dirname, './src/*/index.js')), 使⽤用 source map 开发环境开启，线上环境关闭 作⽤用：通过 source map 定位到源代码 · 线上排查问题的时候可以将 sourcemap 上传到错误监控系统 · source map科普⽂文：http://www.ruanyifeng

《玩转 webpack》 基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 如何将编译后的⽂文件输出到磁盘 Output 的⽤用法：单⼊入⼝口配置 module.exports = { entry: './path/to/my/entry/file.js' output: { filename: 'bundle.js’, path: __dirname + '/dist' } }; Output 的⽤用法：多⼊入⼝口配置 module.exports = { entry: { 'raw-loader' } ] } }; test 指定匹配规则 use 指定使⽤用的 loader 名称 核⼼心概念之 Plugins 插件⽤用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入 作⽤用于整个构建过程 常⻅见的 Plugins 有哪些？ Plugins 的⽤用法 const path = require('path'); module.exports =

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 handleResult (err, result) { result.image; result.coordinates; result.properties; }); 插件的运行环境 插件没有像 loader 那样的独立运行环境 只能在 webpack 里面运行 插件的基本结构 基本结构： 插件使用： plugins: [ new MyPlugin() ] class MyPlugin { ······························ ··· · ················ ·· ························· ··· 搭建插件的运行环境 const path = require("path"); const DemoPlugin = require("./plugins/demo-plugin.js"); const PATHS

基础篇：webpack 与构建发展简史 ⽬目 录 CONTENTS 01 基础篇：webpack 基础⽤用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 主⻚页 类⽬目⻚页 详情⻚页 登陆/注册 前台模块拆分 后台模块拆分 React 全家桶环境搭建 · 初始化项⽬目 npm init -y · 创建项⽬目⽬目录 · 安装 react、react-dom、redux、react-redux npm i react react-dom 开发⽅方式，数据库基于 Sequelize · Rest API ⻛风格 ·采⽤用 JWT 进⾏行行鉴权 ·组件化，组件颗粒度尽可能⼩小 ·直接复⽤用 builder-webpack-geektime 的构建配置，⽆无需关注构建脚本 源码和演示地址 · 源码： https://github.com/cpselvis/geektime-webpack-course · 演示步骤： README 有详细步骤

实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 现有目录结构如下： └── js/ └── a.js 规律 1. 找到 js/目录下的所有 .js 文件 文件，压缩它们，将压缩后的文件存放在 dist/js/ 目录下。 gulp 代码 你可以 下载所有示例代码 或 在线查看代码 建议 建议：你可以只阅读下面的代码与注释或同时阅读代码解释 gulp 的所有配置代码都写在 gulpfile.js 文件。 一、新建一个 一、新建一个 gulpfile.js gulpfile.js 文件 文件 chapter2 └── gulpfile.js 二、在 目录下的所有 css 文件，压缩它们，将压缩后的文件存放在 dist/css/ 目录下。 gulp 代码 你可以 下载所有示例代码 或 在线查看代码 当熟悉 使用 gulp 压缩 JS 的方法后，配置压缩 CSS 的 gulp 代码就变得很轻松。 一、安装 gulp-minify-css 一、安装 gulp-minify-css 模块 提示：你需要使用命令行的 cd 切换到对应目录后进行安装操作。

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 node_modules 目的：尽可能的少构建模块 减少文件搜索范围 优化 resolve.mainFields 配置 优化 resolve.modules 配置（减少模块搜索层级） 优化 resolve.extensions 配置 合理使用 alias 图片压缩 使用：配置 image-webpack-loader 要求：基于 Node 库的 imagemin 或者 tinypng API