通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 配置 抽离成一个 npm 包统一管理 ·开发环境：webpack.dev.js ·生产环境：webpack ·生产环境：webpack.prod.js ·规范：Git commit日志、README、ESLint 规范、Semver 规范 ·质量：冒烟测试、单元测试、测试覆盖率和 CI ·SSR环境：webpack.ssr.js …… ·基础配置：webpack.base.js 通过 webpack-merge 组合配置 > merge = require("webpack-merge") ... > merge(

低成本的迁移，并提供更好 的构建性能。 https://www.rspack.dev Rspack 解决了什么问题? ???️ 开发环境性能 巨型项目中 Dev 启动时间 5-10 分钟，HMR 时间 10-20 秒， 甚至更久，开发体验极差 Rspack 解决了什么问题? ??? 生产环境性能 巨型项目中 Build 时间 10-20 分钟，甚至更久，拖慢 CI/CD 效率 Rspack 解决了什么问题 解决了什么问题? ??? 灵活丰富的配置 不止覆盖 Web 开发场景，能够应对各种场景 Rspack 解决了什么问题? ??? 强大的生产环境优化 强大可自定义配置的拆包能力等决定了产物的性能 Rspack 解决了什么问题? ??? ♂️ 方便从原有方案（Webpack）迁移 用最小的成本优化巨型项目的开发体验 Rspack 解决了什么问题? ??? 社区现有方案往往能解决其中一两个问题， Webpack 生态 3. 支持 Module Federation 模块联邦 4. 支持 Lazy Compilation 懒编译 5. 支持 Persistent Cache 持久缓存 6. 更多生产环境优化策略 7. 持续优化构建性能 感谢 ??? Rspack 的实现离不开以下项目 ??? 了解更多 • 官方文档 (rspack.dev) • GitHub (web-infra-dev/rspack)

实战篇：React 全家桶 和 webpack 开发商城项目 08 基础篇：webpack 进阶用法 03 开始：从 webpack 命令行说起 ·开发环境： npm run dev 通过 npm scripts 运行 webpack ·生产环境：npm run build 通过 webpack 直接运行 ·webpack entry.js bundle.js 这个过程发生了 什么？ 查找 //返回与本地环境相关的一些信息 ]; webpack-cli 提供的不需要编译的命令 命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类： ·Config options: 配置相关参数(文件名称、运行环境等) ·Basic

}, plugins: [ new HtmlwebpackPlugin({ template: './src/index.html’ }) ] }; 打包的⼊入⼝口⽂文件 打包的输出 环境 Loader 配置 插件配置 ·································· ································· ·········· template: './src/index.html’ }) ] }; 指定默认的 entry 为： ./src/index.js 指定默认的 output 为： ./dist/main.js 环境搭建：安装 Node.js 和 NPM ·通过 curl 安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install com/nvm-sh/nvm/v0.34.0/install.sh | bash 安装 Node.js 和 NPM ·nvm install v10.15.3 ·检查是否安装成功：node -v, npm -v 环境搭建：安装 webpack 和 webpack-cli 安装 webpack 和 webpack-cli ·npm install webpack webpack-cli --save-dev

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

/src/search/index.js ‘ } }; · entry: glob.sync(path.join(__dirname, './src/*/index.js')), 使⽤用 source map 开发环境开启，线上环境关闭 作⽤用：通过 source map 定位到源代码 · 线上排查问题的时候可以将 sourcemap 上传到错误监控系统 · source map科普⽂文：http://www.ruanyifeng ssr 打包存在的问题 浏览器器的全局变量量 (Node.js 中没有 document, window) 样式问题 (Node.js ⽆无法解析 css) ·组件适配：将不不兼容的组件根据打包环境进⾏行行适配 ·请求适配：将 fetch 或者 ajax 发送请求的写法改成 isomorphic-fetch 或者 axios ·⽅方案⼀一：服务端打包通过 ignore-loader 忽略略掉

'raw-loader' } ] } }; test 指定匹配规则 use 指定使⽤用的 loader 名称 核⼼心概念之 Plugins 插件⽤用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入 作⽤用于整个构建过程 常⻅见的 Plugins 有哪些？ Plugins 的⽤用法 const path = require('path'); module.exports = HtmlWebpackPlugin({template: './src/index.html'}) ] }; 放到 plugins 数组⾥里里 核⼼心概念之 Mode Mode ⽤用来指定当前的构建环境是：production、development 还是 none 设置 mode 可以使⽤用 webpack 内置的函数，默认值为 production Mode 的内置函数功能 资源解析：解析

CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 主⻚页 类⽬目⻚页 详情⻚页 登陆/注册 前台模块拆分 后台模块拆分 React 全家桶环境搭建 · 初始化项⽬目 npm init -y · 创建项⽬目⽬目录 · 安装 react、react-dom、redux、react-redux npm i react react-dom