发送给他，他只需在命令 行输入 npm install 就可以检测 package.json 中的 devDependencies 并安装所有依赖。 设计目录结构 我们将文件分为2类，一类是源码，一类是编译压缩后的版本。文件夹分别为 src 和 dist 。(注意区分 dist 和 · dest 的区别) └── src/ │ └── dist/ dist/ 目录下的文件都是根据 watchPath(event, search, replace, distExt) 参数 参数 说明 说明 event gulp.watch 回调函数的 event search 需要被替换的起始字符串 replace 第三个参数是新的的字符串 distExt 扩展名(非必填) 此时编辑 src/js/log.js 文件并保存，命令行会出现消息，表示检测到 src/js/log.js 文件修改后只重新编 译

“/abs/path/to/file.txt?query”, // String: 资源的绝对路径(可以增加查询字符串) loaders: [“/abs/path/to/loader.js?query”], // String[]: loader 的绝对路径(可以增加查询字符串) context: { minimize: true }, const json = JSON.stringify(source) .replace(/\u2028/g, ‘\\u2028 ' ) // 为了安全起见, ES6模板字符串的问题 .replace(/\u2029/g, '\\u2029'); return `export default ${json}`; }; src/demo.txt

console.log('这段代码永远不会执行’); } Tree-shaking 原理理 利利⽤用 ES6 模块的特点: ·只能作为模块顶层的语句句出现 · import 的模块名只能是字符串串常量量 · import binding 是 immutable的 代码擦除： uglify 阶段删除⽆无⽤用代码 现象：构建后的代码存在⼤大量量闭包代码 编译后（bundle.js） 编译前 减少⽩白屏时间 对于 SEO 友好 SSR 代码实现思路路 服务端 客户端 ·使⽤用 react-dom/server 的 renderToString ⽅方法将 React 组件渲染成字符串串 ·服务端路路由返回对应的模板 ·打包出针对服务端的组件 webpack ssr 打包存在的问题 浏览器器的全局变量量 (Node.js 中没有 document, window) 样式问题

命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类： ·Config options: 配置相关参数(文件名称、运行环境等) ·Basic options: 基础参数(entry设置、debug模式设置、watch监听设置、devtool设置) webpack 的插件系统。 Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子 Tapable hooks 类型 Tapable 的使用 -new Hook 新建钩子 Tapable 暴露出来的都是类方法，new 一个类方法获得我们需要的钩子 class 接受数组参数 options ，非必传。类方法会根据传参，接受同样数量的参数。 const hook1 = new

Set 替代 Object、includes 替代 indexOf） 默认使用更快的 md4 hash 算法 webpacks AST 可以直接从 loader 传递给 AST，减少解析时间 使用字符串方法替代正则表达式 多进程/多实例构建：资源并行解析可选方案 多进程/多实例：使用 HappyPack 解析资源 HappyPack工作流程 原理：每次 webapck 解析一个模块，HappyPack

不不断加⼊入到依赖图中 Entry 的⽤用法 module.exports = { entry: './path/to/my/entry/file.js' }; 单⼊入⼝口：entry 是⼀一个字符串串 多⼊入⼝口：entry 是⼀一个对象 module.exports = { entry: { app: './src/app.js', adminApp: './src/adminApp.js'

基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 ⽀支付服务 评论服务 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 主⻚页 类⽬目⻚页 详情⻚页 登陆/注册 前台模块拆分 后台模块拆分 React 全家桶环境搭建 · 初始化项⽬目 npm init -y · 创建项⽬目⽬目录 · 安装 react、react-