后面的章节中如果代码中存在 gulp.watch 并在命令行运行了 gulp 则需要使用 Ctrl + C 退出任务。 npm 模块管理器 如果你了解 npm 则跳过此章节 若你不了解npm 请阅读 npm模块管理器 安装 gulp npm 是 node 的包管理工具，可以利用它安装 gulp 所需的包。（在安装 node 时已经自动安装了 npm） 在命令行输入 npm install 若一直没安装成功，请使用 cnpm 安装(npm的国内加速镜像) 意思是：使用 npm 安装全局性的( -g ) gulp 包。 如果你安装失败，请输入 sudo npm install -g gulp 使用管理员权限安装。（可能会要求输入密码） 安装时请注意命令行的提示信息，安装完成后可在命令行输入 gulp -v 以确认安装成功。 至此，我们完成了准备工作。接着让 gulp 开始帮我们干活吧！ gulp = require('gulp') require() 是 node （CommonJS）中获取模块的语法。 在 gulp 中你只需要理解 require() 可以获取模块。 三、获取 三、获取 gulp-uglify gulp-uglify 组件 组件 // 获取 uglify 模块（用于压缩 JS） var uglify = require('gulp-uglify') 四、创建压缩任务

平台层 ⾸首⻚页 列列表⻚页 购物⻋车⻚页 商品管理理 订单管理理 ⽤用户端 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 ⽀支付服务 评论服务 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 主⻚页 类⽬目⻚页 详情⻚页 登陆/注册 前台模块拆分 后台模块拆分 React 全家桶环境搭建 · 初始化项⽬目 ·修改商品(PUT)： /goods/:id ·⽤用户注册(POST)：/user/register ·⽤用户登陆(GET)：/user/login 登陆注册模块开发 JSON Web Token ⼯工作原理理 登陆注册模块开发 - 注册功能 · 注册 API (POST): http://127.0.0.1:8001/api/v1/user/register curl -X POST 注册截图 登陆注册模块开发 - 登录功能 · 登陆 API (POST): http://127.0.0.1:8001/api/v1/user/login curl -X POST -d "username=test&password=123456" "http://127.0.0.1:8001/api/v1/user/login" · 登录截图 商品模块开发 商品模块开发 - 创建商品

文档、ChangeLog 文档等 ·冒烟测试、单元测试、测试覆盖率 ·持续集成 构建配置管理的可选方案 将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks 通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制 抽成一个工具进行管理，比如：create-react-app, kyt, nwb 将所有的配置放在一个文件，通过 将所有的配置放在一个文件，通过 --env 参数控制分支选择 构建配置包设计 通过多个配置文件管理不同环境的 webpack 配置 抽离成一个 npm 包统一管理 ·开发环境：webpack.dev.js ·生产环境：webpack.prod.js ·规范：Git commit日志、README、ESLint 规范、Semver 规范 ·质量：冒烟测试、单元测试、测试覆盖率和 CI ·SSR环境：webpack .. ) { a: [ 1, 2 ], b: 10, c: 20, d: 421 } 合并配置：module.exports = merge(baseConfig, devConfig); 功能模块设计 目录结构设计 + |- /test + |- /lib + |- webpack.dev.js + |- webpack.prod.js + |- webpack.ssr

通过占位符确保⽂文件名称的唯⼀一 核⼼心概念之 Loaders webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返回转换的结果。 常⻅见的 Loaders 有哪些？ Loaders 的⽤用法 const path = require('path'); use: 'raw-loader' } ] } }; test 指定匹配规则 use 指定使⽤用的 loader 名称 核⼼心概念之 Plugins 插件⽤用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入 作⽤用于整个构建过程 常⻅见的 Plugins 有哪些？ Plugins 的⽤用法 const path = require('path'); module.exports

将⾏为改为允许、废弃或禁⽤。 webpack 5 webpack 4 之前的版本是：如果某个模块依赖 Node.js 里面的核心模块，那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。 功能清除：不再为 Node.js 模块引⼊ polyfill 功能清除：不再为 Node.js 模块引⼊ polyfill node-libs-browser：https://github dme ⻓期缓存：确定的模块 Id、chunk 和导出名称 在生产模式下，默认的 chunkIds: “deterministic”, moduleIds: “deterministic”。设置成 deterministic 时默认最小 3 位数字会被 使用 chunkIds moduleIds webpack 5 webpack 4 ⻓期缓存：确定的模块 Id、chunk 和导出名称 Shaking 优化-内部模块 Tree shaking 代码⽣成：⽀持⽣成 ES6 代码 webpack 4 之前只⽣成 ES5 的代码。 webpack 5 则现在既可以⽣成 ES5 ⼜可以⽣成 ES6/ES2015 代码。 两种设置⽅式：5 =< ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020 开创性的特性：模块联邦 发明者：Zack Jackson

options: 配置相关参数(文件名称、运行环境等) ·Basic options: 基础参数(entry设置、debug模式设置、watch监听设置、devtool设置) ·Module options: 模块参数，给 loader 设置扩展 ·Output options: 输出参数(输出路径、输出文件名称) ·Advanced options: 高级用法(记录设置、缓存设置、监听频率、bail等) 开始编译 从entry开始递归的 分析依赖，对每个 依赖模块进行build 对模块位置进行解析 将loader加载完成的 module进行编译，生成 AST树 遍历AST，当遇到 require等一些调用表 达式时，收集依赖 所有依赖build完 成，开始优化 输出到dist目录 build-module 开始构建某个模块 WebpackOptionsApply 将所有的配置 ·finish (上报模块错误) ·seal ModuleFactory ModuleFactory NormalModuleFactory ContextModuleFactory Module Module NormalModule ContextModule ExternalModule DelegatedModule MultiModule 普通模块 ./src/a ./src/b

com/blog/2013/01/javascript_source_map.html source map 关键字 source map: 产⽣生.map⽂文件 eval: 使⽤用eval包裹模块代码 cheap: 不不包含列列信息 inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件 module:包含loader的sourcemap source map 'commons', chunks: 'all', minChunks: 2 } } } } } }; minuSize: 分离的包体积的⼤大⼩小 tree shaking(摇树优化) 概念：1 个模块可能有多个⽅方法，只要其中的某个⽅方法使⽤用到了了，则整个⽂文件都会被打到 bundle ⾥里里⾯面去，tree shaking 就是只把⽤用到的⽅方法打⼊入 bundle ，没⽤用到的⽅方法会在 代码只会影响死变量量（只写不不读） if (false) { console.log('这段代码永远不会执行’); } Tree-shaking 原理理 利利⽤用 ES6 模块的特点: ·只能作为模块顶层的语句句出现 · import 的模块名只能是字符串串常量量 · import binding 是 immutable的 代码擦除： uglify 阶段删除⽆无⽤用代码 现象：构建后的代码存在⼤大量量闭包代码

分析整个打包总耗时 每个插件和loader的耗时情况 webpack-bundle-analyzer 分析体积 代码示例 构建完成后会在 8888 端口展示大小 可以分析哪些问题？ 依赖的第三方模块文件大小 业务里面的组件代码大小 使用高版本的 webpack 和 Node.js 构建时间降低了 60%-98%！ 使用 webpack4：优化原因 V8 带来的优化（for of 替代 多进程/多实例：使用 HappyPack 解析资源 HappyPack工作流程 原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中 代码示例 多进程/多实例：使用 thread-loader 解析资源 原理：每次 webpack 解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 多进程/多实例：并行压缩 思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中 方法：使用 html-webpack-externals- plugin 进一步分包：预编译资源模块 思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件 方法：使用 DLLPlugin 进行分包，DllReferencePlugin

best feature! Rspack 有哪些特性？ ??? Rust 实现核心部分，充分利用并发和 LTO 优化 Rspack 有哪些特性？ ???️ O(≈1) 增量 HMR，只编译修改的模块 Rspack 有哪些特性？ ⚡️ Dev 启动耗时 Rspack 有哪些特性？ 一些业务收益 Webpack Rspack 提升 build 380s 28s 13 倍 dev 368s 的生态与未来 Rspack 的生态与未来 1. 支持更多常用框架：Vue、Qwik 等 2. 完善插件 API，兼容更多 Webpack 生态 3. 支持 Module Federation 模块联邦 4. 支持 Lazy Compilation 懒编译 5. 支持 Persistent Cache 持久缓存 6. 更多生产环境优化策略 7. 持续优化构建性能 感谢 ??? Rspack

"build": "webpack" }, "keywords": [], "author": "", "license": "ISC" } 通过 npm run build 运⾏行行构建 原理理：模块局部安装会在 node_modules/.bin ⽬目录创建软链接 扫码试看/订阅 《玩转 webpack》