webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型 前端 后端 商城架构设计 主⻚页 类⽬目⻚页 详情⻚页 登陆/注册 前台模块拆分 后台模块拆分 React 全家桶环境搭建 · 初始化项⽬目 npm init -y · 创建项⽬目⽬目录 · 安装 react、react-dom、redux、react-redux npm i react react-dom redux react-redux -S · 安装 geektime-builder-webpack

webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 ������� ����������� 当前构建时的问题 每次构建的时候不不会清理理⽬目录，造成构建的输出⽬目录 inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件 module:包含loader的sourcemap source map 类型 基础库分离 ·思路路：将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ·⽅方法：使⽤用 html-webpack- externals-plugin 利利⽤用 SplitChunksPlugin 匹配出需要分离的包 module.exports = { optimization: { splitChunks: { cacheGroups: { commons: { test: /(react|react-dom)/, name: 'vendors', chunks: 'all' } } } } }; 利利⽤用 SplitChunksPlugin 分离⻚页⾯面公共⽂文件 minChunks:

webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 stats: 构建的统计信息 package.json 中使用 stats 初级分析：使用 webpack parallel 参数 分包：设置 Externals 思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中 方法：使用 html-webpack-externals- plugin 进一步分包：预编译资源模块 思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件 方法：使用 DLLPlugin

具备静态文件服务功能 Vite 打包流程 – 静态⽂件托管服务 文件路径：src/node/server/index.ts 处理裸导⼊（bare import）的模块路径，eg: import react from 'react'; 浏览器（只有相对路径和绝对路径）无法识别，因 此需要重写模块路径 Vite 打包流程 – 重写模块路径 文件路径：src/node/server/serverPluginModuleRewrite 对于 bare import，把模块名替换为这个模块的 entry path ，并在 path 的开头补上一个 /@modules 的标识符。 如：import React from "/@modules/@pika/react/source.development.js" 相对路径转绝对路径，方便浏览器请求。 补齐文件扩展名和经常被省略的 index.xxx 如：import a from

webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 核⼼心概念之 Entry Entry ⽤用来指定 webpack 的打包⼊入⼝口 理理解依赖图的含义 的 babel preset 配置 资源解析：解析 React JSX { "presets": [ "@babel/preset-env", + "@babel/preset-react" ], "plugins": [ "@babel/proposal-class-properties" ] } 增加 React 的 babel preset 配置 资源解析：解析

RELEASED JUL 2014: REACT-HOT-LOADER • DAN ABRAMOV ASKED ABOUT HOT MODULE REPLACEMENT ON STACKOVERFLOW • AND CREATED react-hot-loader • HE WAS LATER HIRED BY FACEBOOK, TO WORK ON REACT.JS JUL 2014: INSTAGRAM SEPARATELY. CAN MAJOR RELEASE SEPARATELY. • REDUCED INSTALL SIZE WHEN NOT USING THE CLI: • create-react-app, angular-cli, vue-cli, preact-cli, … FEB 2018: WEBPACK 4 LEGATO • 4.0.0 • WE FOLLOWED THE RELEASE

webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 构建配置抽离成 npm 包的意义 可维护性 通用性 质量 ·业务开发者无需关注构建配置 ·统一团队构建脚本 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 配置 抽离成一个 npm 包统一管理 "conventional-changelog-cli": "^1.2.0", "husky": "^0.13.1" } Changelog 生成 开源项目版本信息案例 React 版本信息 版本是严格递增的，此处是：16.2.0 - > 16.3.0 -> 16.3.1 软件的版本通常由三位组成，形如： X.Y.Z 在发布重要版本时，可以发布alpha, rc 等先行版本

• https://github.com/sokra/slides • USELESS FILENAMES • ALGORITHM • src_lazy-loaded_js • react_react-dom • • DIFFERENT FILENAMES • NOTHING TO DO • /* webpackChunkName: "name" */ • EXTENSIBLE

Plugin 兼容/可替代 • html-webpack-plugin => @rspack/plugin-html or builtins.html • react-refresh-webpack-plugin => builtins.react.refresh • webpack.DefinePlugin => builtins.define • webpack.ProvidePlugin =>

webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略略 05 原理理篇：通过源码掌握 webpack 打包原理理 06 原理理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 为什什么需要构建⼯工具？ 转换 ES6 语法 转换 JSX 压缩混淆 ES6 module