12年毕业于北京航空航天大学软件工程专业，先后就职于人人网、百度，现在在百度外卖担任高*前端工程师。拥有五年前端工程经验，对前端开发基础架构造型、技术应用、团队高效协作有自己独到的见解。热爱前端和开源，喜欢用*台化和工程化手段解决业务中的问题。 

第1章 搭建开发环境 1 

1．1 本地N0de环境 1 

1．1．1 N0de．js 1 

1．1．2 npm 7 

1．1．3 yarn 12 

1．1．4 npm vs yarn 17 

1．2 ide相关配置 17 

1．2．1 常用ide 17 

1．2．2 Sublime text 17 

1．2．3 Atom 20 

1．2．4 WebStorm 22 

1．2．5 VSCode 23 

1．3 本章小结 27 

第2章 从零搭建Vue工程 28 

2．1 本地开发需要哪些工具 28 

2．2 搭建Vue工程 29 

2．2．1 Vue-cli 29 

2．2．2 脚手架项目构成分析 30 

2．3 webpack配置 32 

2．3．1 webpack简介 32 

2．3．2 webpack配置解析 33 

第3章 API详解 45 

3．1 全局变量 45 

3．1．1 silent 45 

3．1．2 optionMergeStrategies 45 

3．1．3 devtools 46 

3．1．4 errorHandler 48 

3．1．5 ignoredElements 48 

3．1．6 keyCodes 49 

3．1．7 performance 49 

3．1．8 productionTip 49 

3．2 模板语法 50 

3．3 指令 50 

3．3．1 v-text 51 

3．3．2 v-html 51 

3．3．3 v-pre 51 

3．3．4 v-cloak 52 

3．3．5 v-once 53 

3．3．6 v-if 54 

3．3．7 v-else 54 

3．3．8 v-else-if 55 

3．3．9 v-show 55 

3．3．10 v-for 56 

3．3．11 v-bind 64 

3．3．12 v-model 70 

3．3．13 v-on 74 

3．3．14 自定义指令 77 

3．4 过滤器 79 

3．5 计算属性 80 

3．5．1 基础例子 80 

3．5．2 计算属性vs Methods 81 

3．5．3 计算属性缓存 81 

3．5．4 Computed属性vs Watched属性 82 

3．5．5 计算setter 83 

3．6 观察者Watchers 84 

3．7 组件的功能与使用 86 

3．7．1 使用组件 86 

3．7．2 组件开发 88 

3．7．3 非Props属性 92 

3．7．4 自定义事件 92 

3．7．5 Slots内容分发 96 

3．7．6 动态组件 99 

3．7．7 组件的其他知识 100 

3．8 继承与混合 104 

3．8．1 Vue．extend 105 

3．8．2 options里的extends 105 

3．8．3 源码分析 105 

3．8．4 合并策略 106 

3．9 插件plugin 111 

第4章 Vue组件库 115 

4．1 Element 115 

4．1．1 Element的设计 115 

4．1．2 Element的UI 116 

4．1．3 Element的优缺点 117 

4．2 Mint UI 118 

4．2．1 Mint UI的特性 118 

4．2．2 Mint UI的优缺点 119 

4．3 iView 119 

4．3．1 iView简介 120 

4．3．2 iView的优缺点 120 

4．4 Vux 121 

4．4．1 Vux简介 121 

4．4．2 Vux优缺点 122 

4．5 XCUI 122 

4．5．1 XCUI简介 122 

4．5．2 XCUI优缺点 123 

第5章 官方周边库 124 

5．1 Axios 124 

5．1．1 功能 124 

5．1．2 安装 124 

5．1．3 Example 125 

5．1．4 Axios API 126 

5．1．5 请求配置 127 

5．1．6 响应结构 130 

5．1．7 配置的默认值/defaults 131 

5．1．8 拦截器 132 

5．1．9 错误处理 133 

5．1．10 取消 134 

5．1．11 Promises 135 

5．1．12 TypeScript 135 

5．2 Vuex的使用 135 

5．2．1 State 135 

5．2．2 Getters 137 

5．2．3 Mutations ＆ Actions 138 

5．2．4 Modules 141 

5．2．5 模块重用 145 

5．3 Vue-router使用 146 

5．3．1 安装 146 

5．3．2 开始 146 

5．3．3 动态路由匹配 147 

5．3．4 编程式导航 151 

5．3．5 命名路由 152 

5．3．6 命名视图 153 

5．3．7 重定向和别名 153 

5．3．8 HTML5 History模式 154 

5．3．9 后端配置例子 155 

5．3．10 警告 155 

5．3．11 导航钩子 156 

5．3．12 过渡动效 159 

5．3．13 数据获取 160 

5．3．14 滚动行为 163 

5．3．15 懒加载 164 

第6章 Vue项目优化 166 

6．1 状态过渡 166 

6．1．1 过渡的概念 166 

6．1．2 CSS过渡 166 

6．1．3 钩子 167 

6．2 Vue项目的自动化测试 170 

6．2．1 unit tests 172 

6．2．2 e2e测试 175 

6．3 Typescript Support 179 

6．3．1 Typescript 179 

6．3．2 安装Typescript 180 

6．3．3 Typescript和Vue结合 180 

6．4 MPA 186 

6．4．1 关于MPA的优劣势 187 

6．4．2 如何实现MPA 187 

6．5 Vue的异构 190 

6．5．1 不属于异构的情况 191 

6．5．2 通过封装成Vue组件的方式实现异构 192 

6．5．3 通过directive的方式实现异构 194 

6．5．4 循环嵌套Vue组件 197 

6．6 服务端渲染 198 

6．6．1 服务端渲染的概念 198 

6．6．2 用Vue-ssr的意义 198 

6．6．3 Vue-ssr的作用 198 

6．6．4 Vue-ssr学习难度 198 

6．6．5 技术栈 199 

6．6．6 前后端数据策略 199 

6．6．7 性能影响 199 

6．6．8 安装 200 

6．6．9 渲染一个Vue实例 200 

6．6．10 一个例子 202 

6．7 Vue的pre-render 204 

第7章 原理解析 206 

7．1 Virtual DOM原理 206 

7．1．1 DOM 206 

7．1．2 Virtual DOM算法 209 

7．2 Vue精髓之响应式数据流 210 

7．2．1 数据流演进史 210 

7．2．2 Vue和React介绍 211 

7．2．3 Vue的响应式数据流的优势 211 

7．2．4 Object．defineProperty与订阅发布设计模式 213 

7．2．5 Vue源码 214 

7．2．6 Vue的render函数就是Watcher的expOrFn 218 

7．3 Vuex2．0源码解析 219 

7．3．1 Vuex的含义 219 

7．3．2 源码分析 220 

7．3．3 Vuex API分析 233 

7．3．4 辅助函数 235 

7．3．5 插件 239 

7．3．6 一些函数的封装 242 

7．4 Vue-router原理 244 

7．4．1 Vue-router 244 

7．4．2 Vue-router应用举例 244 

7．4．3 Vue-router原理 245 

第8章 进军WEEX 256 

8．1 搭建WEEX基础环境 256 

8．1．1 初始化：hello world 256 

8．1．2 dotwe 257 

8．2 分析首*WEEX工程代码 258 

8．2．1 目录结构 258 

8．2．2 通过serve起服务 258 

8．2．3 webpack配置 259 

8．2．4 页面开发 260 

8．3 debug WEEX代码 260 

8．3．1 web端调试 260 

8．3．2 手机端调试 261 

8．4 集成WEEX到已有应用 263 

8．4．1 集成到Android 263 

8．4．2 集成到iOS 268 

8．5 使用WEEXpack构建移动应用 271 

1．1 现代Web前端技术发展概述 1
1．1．1 现代Web前端技术应用 1
1．1．2 现代Web前端技术概述 4
1．1．3 Web前端技术发展 6
1．2 浏览器应用基础 10
1．2．1 浏览器组成结构 10
1．2．2 浏览器渲染引擎简介 12
1．2．3 浏览器数据持久化存储技术 20
1．3 前端高效开发技术 34
1．3．1 前端高效开发工具 34
1．3．2 前端高效调试工具 36
1．4 本章小结 42
第2章 前端与协议 43
2．1 HTTP协议简介 43
2．1．1 HTTP协议概述 43
2．1．2 HTTP 1．1 45
2．1．3 HTTP 2 51
2．2 web安全机制 53
2．2．1 基础安全知识 53
2．2．2 请求劫持与HTTPS 57
2．2．3 HTTPS协议通信过程 59
2．2．4 HTTPS协议解析 61
2．2．5 浏览器Web安全控制 63
2．3 前端实时协议 64
2．3．1 WebSocket通信机制 65
2．3．2 Poll和Long-poll 66
2．3．3 前端DDP协议 70
2．4 RESTful数据协议规范 71
2．5 与Native交互协议 73
2．5．1 Hybrid App应用概述 74
2．5．2 Web到Native协议调用 74
2．5．3 Native到Web协议调用 77
2．5．4 JSBridge设计规范 78
2．6 本章小结 81
第3章 前端三层结构与应用 82
3．1 HTML结构层基础 83
3．1．1 必须要知道的DOCTYPE 83
3．1．2 Web语义化标签 84
3．1．3 HTML糟糕的部分 87
3．1．4 AMP HTML 90
3．2 前端结构层演进 94
3．2．1 XML与HTML简述 94
3．2．2 HTML5标准 95
3．2．3 HTML Web Component 96
3．3 浏览器脚本演进历史 102
3．3．1 CoffeeScript时代 103
3．3．2 ECMAScript标准概述 105
3．3．3 TypeScript概况 105
3．3．4 衍生脚本 106
3．4 标准实践 107
3．4．1 ECMAScript 5 107
3．4．2 ECMAScript 6 113
3．4．3 ECMAScript 7+ 128
3．4．4 TypeScript 130
3．5 前端表现层基础 131
3．5．1 CSS发展概述 131
3．5．2 CSS选择器与属性 132
3．5．3 简单的应用举例 133
3．6 前端界面技术 135
3．6．1 CSS样式统一化 136
3．6．2 CSS预处理 138
3．6．3 表现层动画实现 141
3．6．4 CSS4与展望 149
3．7 响应式网站开发技术 149
3．7．1 响应式页面实现概述 149
3．7．2 结构层响应式 152
3．7．3 表现层响应式 160
3．7．4 行为层响应式 166
3．8 本章小结 167
第4章 现代前端交互框架 168
4．1 直接DOM操作时代 168
4．2 MV*交互模式 176
4．2．1 前端MVC模式 176
4．2．2 前端MVP模式 180
4．2．3 前端MVVM模式 181
4．2．4 数据变更检测示例 185
4．3 Virtual DOM交互模式 193
4．3．1 Virtual DOM设计理念 193
4．3．2 Virtual DOM的核心实现 196
4．4 前端MNV*时代 200
4．4．1 MNV*模式简介 201
4．4．2 MNV*模式实现原理 201
4．5 本章小结 203
第5章 前端项目与技术实践 204
5．1 前端开发规范 204
5．1．1 前端通用规范 205
5．1．2 前端HTML规范 208
5．1．3 前端CSS规范 212
5．1．4 ECMAScript 5常用规范 218
5．1．5 ECMAScript 6+ 参考规范 222
5．1．6 前端防御性编程规范 227
5．2 前端组件规范 229
5．2．1 UI组件规范 230
5．2．2 模块化规范 233
5．2．3 项目组件化设计规范 237
5．3 自动化构建 242
5．3．1 自动化构建的目的 243
5．3．2 自动化构建原理 243
5．3．3 构建工具设计的问题 246
5．4 前端性能优化 248
5．4．1 前端性能测试 248
5．4．2 桌面浏览器前端优化策略 253
5．4．3 移动端浏览器前端优化策略 258
5．5 前端用户数据分析 266
5．5．1 用户访问统计 266
5．5．2 用户行为分析 267
5．5．3 前端日志上报 270
5．5．4 前端性能分析上报 275
5．6 前端搜索引擎优化基础 275
5．6．1 title、keywords、description的优化 275
5．6．2 语义化标签的优化 277
5．6．3 URL规范化 278
5．6．4 robots 279
5．6．5 sitemap 279
5．7 前端协作 280
5．7．1 沟通能力和沟通技巧 280
5．7．2 与产品经理的“对抗” 281
5．7．3 与后台工程师的合作 281
5．7．4 与运维工程师的“周旋” 282
5．7．5 对前端团队的支持 282
5．8 本章小结 283
第6章 前端跨栈技术 284
6．1 跨后端实现技术 284
6．1．1 N0de后端开发基础概述 285
6．1．2 早期MEAN简介 288
6．1．3 N0de后端数据渲染 289
6．1．4 前后端同构概述 290
6．1．5 前后端同构实现原理 291
6．2 跨终端设计与实现 297
6．2．1 Hybrid技术趋势 297
6．2．2 Hybrid实现方式 299
6．2．3 基于localStorage的资源离线和更新技术 301
6．2．4 基于Native与Web的资源离线和更新技术 308
6．2．5 资源覆盖率统计 310
6．2．6 仍需要注意的问题 311
6．3 本章小结 312
第7章 未来前端时代 313
7．1 未来前端趋势 314
7．1．1 新标准的进化与稳定 314
7．1．2 应用开发技术趋于稳定并将等待下一次革新 314
7．1．3 持续不断的技术工具探索 315
7．1．4 浏览器*台新特性的应用 315
7．1．5 更优化的前端技术开发生态 315
7．1．6 前端新领域的出现 316
7．2 做一名优秀的前端工程师 318
7．2．1 学会高效沟通 318
7．2．2 使用高效的开发工具 319
7．2．3 处理问题方法论 319
7．2．4 学会前端项目开发流程设计 320
7．2．5 持续的知识和经验积累管理 321
7．2．6 切忌过分追求技术 321
7．2．7 必要的产品设计思维 322
7．3 本章小结 323

随着Web开发技术的发展，Webpack凭借其便于使用和涵盖面广的优势，成为目前非常流行的前端构建工具，是每位前端工程师的必*技能之一。

《深入浅出Webpack》对Webpack进行了全面讲解，涵盖了Webpack入门、配置、实战、优化、原理等方面的内容。其中，第1章讲解Webpack入门所涉及的知识；第2章详细讲解Webpack提供的常用配置项；第3章结合实际项目中的常见场景进行实践；第4章给出优化Webpack的优秀方案；第5章剖析了Webpack的原理，并讲解如何开发Plugin和Loader；附录汇总了常见的Loader、Plugin和Webpack的其他学习资源。除了深入讲解Webpack，本书还介绍了ES6、TypeScript、PostCSS、Prepack、离线缓存、单页应用、CDN等Web开发相关的技能。

无论是对 Webpack一无所知的初学者，还是经验丰富的前端工程师，相信都能够通过《深入浅出Webpack》进一步提升对Webpack的理解，并在Web开发中更熟练地运用Webpack。

第1章 入门 1
1．1 前端的发展 2
1．1．1 模块化 2
1．1．2 新框架 5
1．1．3 新语言 6
1．2 常见的构建工具及对比 8
1．2．1 Npm Script 9
1．2．2 Grunt 10
1．2．3 Gulp 11
1．2．4 Fis3 12
1．2．5 Webpack 14
1．2．6 Rollup 15
1．2．7 为什么选择 Webpack 16
1．3 安装Webpack 16
1．3．1 安装Webpack到本项目 17
1．3．2 安装Webpack到全局 17
1．3．3 使用Webpack 18
1．4 使用Loader 20
1．5 使用Plugin 22
1．6 使用DevServer 24
1．6．1 实时预览 25
1．6．2 模块热替换 25
1．6．3 支持Source Map 26
1．7 核心概念 27 
第2章 配置 28
2．1 Entry 29
2．1．1 context 29
2．1．2 Entry类型 30
2．1．3 Chunk名称 30
2．1．4 配置动态Entry 31
2．2 Output 31
2．2．1 filename 31
2．2．2 chunkFilename 32
2．2．3 path 33
2．2．4 publicPath 33
2．2．5 crossOriginLoading 33
2．2．6 libraryTarget 和 library 34
2．2．7 libraryExport 36
2．3 Module 37
2．3．1 配置Loader 37
2．3．2 noParse 39
2．3．3 parser 40
2．4 Resolve 41
2．4．1 alias 41
2．4．2 mainFields 42
2．4．3 extensions 42
2．4．4 modules 43
2．4．5 descriptionFiles 43
2．4．6 enforceExtension 43
2．4．7 enforceModuleExtension 44
2．5 Plugin 44
2．6 devServer 45
2．6．1 hot 45
2．6．2 inline 45
2．6．3 historyApiFallback 46
2．6．4 contentBase 47
2．6．5 headers 47
2．6．6 host 48
2．6．7 port 48
2．6．8 allowedHosts 48
2．6．9 disableHostCheck 49
2．6．10 https 49
2．6．11 clientLogLevel 49
2．6．12 compress 50
2．6．13 open 50
2．7 其他配置项 50
2．7．1 Target 50
2．7．2 Devtool 51
2．7．3 Watch 和 WatchOptions 51
2．7．4 Externals 52
2．7．5 ResolveLoader 53
2．8 整体配置结构 54
2．9 多种配置类型 58
2．9．1 导出一个Function 58
2．9．2 导出一个返回Promise的函数 60
2．9．3 导出多份配置 60
2．10 总结 61


第3章 实战 62
3．1 使用ES6语言 62
3．1．1 认识Babel 63
3．1．2 接入Babel 67
3．2 使用TypeScript语言 67
3．2．1 认识TypeScript 67
3．2．2 减少代码冗余 69
3．2．3 集成Webpack 69
3．3 使用Flow检查器 70
3．3．1 认识Flow 70
3．3．2 使用Flow 71
3．3．3 集成Webpack 72
3．4 使用SCSS语言 73
3．4．1 认识SCSS 73
3．4．2 接入Webpack 74
3．5 使用PostCSS 75
3．5．1 认识PostCSS 75
3．5．2 接入Webpack 77
3．6 使用React框架 78
3．6．1 React的语法特征 78
3．6．2 React与Babel 78
3．6．3 React与TypeScript 79
3．7 使用Vue框架 81
3．7．1 认识Vue 81
3．7．2 接入Webpack 83
3．7．3 使用TypeScript编写Vue应用 84
3．8 使用Angular2框架 86
3．8．1 认识Angular2 86
3．8．2 接入Webpack 89
3．9 为单页应用生成HTML 90
3．9．1 引入问题 90
3．9．2 解决方案 92
3．10 管理多个单页应用 95
3．10．1 引入问题 95
3．10．2 解决方案 98
3．11 构建同构应用 101
3．11．1 认识同构应用 101
3．11．2 解决方案 103
3．12 构建Electron应用 107
3．12．1 认识Electron 107
3．12．2 接入Webpack 110
3．13 构建Npm模块 113
3．13．1 认识Npm 113
3．13．2 抛出问题 113
3．13．3 使用Webpack构建Npm模块 115
3．13．4 发布到Npm 119
3．14 构建离线应用 120
3．14．1 认识离线应用 120
3．14．2 认识Service Workers 121
3．14．3 接入Webpack 126
3．14．4 验证结果 129
3．15 搭配Npm Script 130
3．15．1 认识Npm Script 130
3．15．2 Webpack为什么需要Npm Script 131
3．16 检查代码 132
3．16．1 代码检查具体是做什么的 133
3．16．2 怎么做代码检查 133
3．16．3 结合Webpack检查代码 136
3．17 通过N0de．js API启动Webpack 138
3．17．1 安装和使用Webpack模块 139
3．17．2 以监听模式运行 139
3．18 使用Webpack Dev Middleware 140
3．18．1 Webpack Dev Middleware支持的配置项 141
3．18．2 Webpack Dev Middleware与模块热替换 143
3．19 加载图片 145
3．19．1 使用file-loader 145
3．19．2 使用url-loader 146
3．20 加载SVG 148
3．20．1 使用raw-loader 149
3．20．2 使用svg-inline-loader 150
3．21 加载Source Map 151
3．21．1 该如何选择 152
3．21．2 加载现有的Source Map 153
3．22 实战总结 154
第4章 优化 156
4．1 缩小文件的搜索范围 157
4．1．1 优化loader配置 157
4．1．2 优化resolve．modules配置 158
4．1．3 优化resolve．mainFields配置 159
4．1．4 优化resolve．alias配置 160
4．1．5 优化resolve．extensions配置 162
4．1．6 优化module．noParse配置 162
4．2 使用DllPlugin 163
4．2．1 认识DLL 163
4．2．2 接入Webpack 164
4．3 使用HappyPack 170
4．3．1 使用HappyPack 170
4．3．2 HappyPack的原理 173
4．4 使用ParallelUglifyPlugin 173
4．5 使用自动刷新 176
4．5．1 文件监听 176
4．5．2 自动刷新浏览器 179
4．6 开启模块热替换 183
4．6．1 模块热替换的原理 183
4．6．2 优化模块热替换 188
4．7 区分环境 189
4．7．1 为什么需要区分环境 189
4．7．2 如何区分环境 190
4．7．3 结合UglifyJS 192
4．7．4 第三方库中的环境区分 192
4．8 压缩代码 193
4．8．1 压缩 193
4．8．2 压缩ES6 195
4．8．3 压缩 CSS 197
4．9 CDN加速 198
4．9．1 什么是CDN 198
4．9．2 接入CDN 199
4．9．3 用Webpack实现CDN的接入 202
4．10 使用Tree Shaking 204
4．10．1 认识Tree Shaking 204
4．10．2 接入Tree Shaking 205
4．11 提取公共代码 208
4．11．1 为什么需要提取公共代码 208
4．11．2 如何提取公共代码 208
4．11．3 如何通过Webpack提取公共代码 210
4．12 分割代码以按需加载 213
4．12．1 为什么需要按需加载 213
4．12．2 如何使用按需加载 213
4．12．3 用Webpack实现按需加载 214
4．12．4 按需加载与ReactRouter 216
4．13 使用Prepack 218
4．13．1 认识Prepack 218
4．13．2 接入Webpack 220
4．14 开启Scope Hoisting 220
4．14．1 认识Scope Hoisting 221
4．14．2 使用Scope Hoisting 222
4．15 输出分析 223
4．15．1 官方的可视化分析工具 224
4．15．2 webpack-bundle-analyzer 228
4．16 优化总结 229
第5章 原理 236
5．1 工作原理概括 236
5．1．1 基本概念 237
5．1．2 流程概括 237
5．1．3 流程细节 238
5．2 输出文件分析 241
5．3 编写Loader 248
5．3．1 Loader的职责 249
5．3．2 Loader基础 249
5．3．3 Loader进阶 250
5．3．4 其他Loader API 253
5．3．5 加载本地Loader 254
5．3．6 实战 256
5．4 编写Plugin 257
5．4．1 Compiler和Compilation 258
5．4．2 事件流 258
5．4．3 常用的API 260
5．4．4 实战 263
5．5 调试Webpack 265
5．6 原理总结 268
附录A 常用的Loader 268
附录B 常用的Plugin 271
附录C 其他Webpack学习资源 273

前端工程化包含一系列规范和流程，其可提升前端工程师的工作效率，加快Web开发迭代速度，是现在前端开发领域中非常重要的一环。《前端工程化：体系设计与实践》系统、全面地介绍了前端工程体系的各个环节，包括设计要点和实践经验。全书分为7章，分别是前端工程简史、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。

《前端工程化：体系设计与实践》适合对前端工程化有一定理解和实践的中高#级前端工程师阅读，同样适合对前端工程化感兴趣的服务器端开发#者以及运维人员阅读。

周俊鹏，1987年生人，天蝎座，5只猫和1只狗的铲屎官，大前端（客户端+Web Service）践行者。主要研究方向为前端工程化和Web应用层架构，好于研究事物的本质，并且乐于从宏观的角度解决问题。时任搜狗地图Web前端开发主管。

1.1 前端工程师的基本素养 2

1.1.1 前端工程师的发展历史 2

1.1.2 前端工程师的技能栈 3

1.2 N0de.js带给前端的改革 7

1.2.1 前端的两次新生 7

1.2.2 N0de.js带来的改革 9

1.3 前后端分离 12

1.3.1 原始的前后端开发模式 13

1.3.2 前后端分离的基本模式 14

1.3.3 前后端分离与前端工程化 19

1.4 前端工程化 19

1.4.1 前端工程化的衡量准则 20

1.4.2 前端工程化的进化历程 21

1.4.3 前端工程化的3个阶段 32

1.5 工程化方案架构 34

1.5.1 webpack 34

1.5.2 工程化方案的整体架构 36

1.5.3 功能规划 37

1.5.4 设计原则 41

1.6 总结 42

第2章 脚手架 43

2.1 脚手架的功能和本质 44

2.2 脚手架在前端工程中的角色和特征 45

2.2.1 用完即弃的发起者角色 45

2.2.2 局限于本地的执行环境 47

2.2.3 多样性的实现模式 49

2.3 开源脚手架案例剖析 51

2.4 集成Yeoman封装脚手架方案 56

2.4.1 封装脚手架方案 57

2.4.2 集成到工程化体系中 63

2.5　总结 66

第3章 构建 68

3.1 构建功能解决的问题 68

3.2 配置API设计原则和编程范式约束 71

3.2.1 配置API设计 71

3.2.2 编程范式约束 75

3.3 ECMAScript与Babel 76

3.3.1 ECMAScript发展史 76

3.3.2 ES6的跨时代意义 78

3.3.3 Babel——真正意义的编译 80

3.3.4 结合webpack与Babel实现构建 84

3.4 CSS预编译与PostCSS 89

3.4.1 CSS的缺陷 90

3.4.2 CSS预编译器 90

3.4.3 PostCSS 91

3.4.4 webpack结合预编译与PostCSS实现CSS构建 93

3.4.5 案例：自动生成CSS Sprites功能实现 95

3.5 模块化开发 101

3.5.1 模块化与组件化 101

3.5.2 模块化与工程化 102

3.5.3 模块化开发的价值 103

3.5.4 前端模块化发展史 107

3.5.5 webpack模块化构建 109

3.6 增量更新与缓存 112

3.6.1 HTTP缓存策略 113

3.6.2 覆盖更新与增量更新 117

3.6.3 按需加载与多模块架构场景下的增量更新 120

3.6.4 webpack实现增量更新构建方案 122

3.7 资源定位 128

3.7.1 资源定位的历史变迁 128

3.7.2 常规的资源定位思维 132

3.7.3 webpack的逆向注入模式 132

3.8 总结 147

第4章 本地开发服务器 149

4.1 本地开发服务器解决的问题 150

4.2 动态构建 152

4.2.1 webpack-dev-middleware 152

4.2.2 Livereload和HMR 157

4.3 Mock服务 161

4.3.1 Mock的必要前提和发展进程 162

4.3.2 异步数据接口 166

4.3.3 SSR 172

4.4 总结 174

第5章 部署 175

5.1 部署流程的设计原则 175

5.1.1 速度——化繁为简 177

5.1.2 协作——代码审查和部署队列 181

5.1.3 安全——严格审查和权限控制 184

5.2 流程之外：前端静态资源的部署策略 186

5.2.1 协商缓存与强制缓存 186

5.2.2 Apache设置缓存策略 186

5.3 总结 190

第6章 工作流 191

6.1 本地工作流 192

6.1.1 二次构建的隐患 193

6.1.2 代码分离与测试沙箱 194

6.2 云*台工作流 197

6.2.1 GitFlow与版本管理 199

6.2.2 WebHook与自动构建 201

6.3 持续集成与持续交付 203

6.4 总结 205

第7章 前端工程化的未来 206

7.1 前端工程师未来的定位 206

7.1.1 不只是浏览器 207

7.1.2 也不只是Web 208

7.2 前端工程化是一张蓝图 209

7.3 总结 212