深入浅出WebpackPDF电子书下载

第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 17

1.3.1安装Webpack到本项目 17

1.3.2安装Webpack到全局 18

1.3.3使用Webpack 18

1.4使用Loader 20

1.5使用Plugin 22

1.6使用DevServer 24

1.6.1实时预览 25

1.6.2模块热替换 26

1.6.3支持Source Map 26

1.7核心概念 27

第2章 配置 29

2.1 Entry 30

2.1.1 context 30

2.1.2 Entry类型 31

2.1.3 Chunk的名称 31

2.1.4配置动态Entry 32

2.2 Output 32

2.2.1 fiilename 32

2.2.2 chunkFilename 33

2.2.3 path 34

2.2.4 publicPath 34

2.2.5 crossOriginLoadmg 34

2.2.6 libraryTarget和library 35

2.2.7 library Export 37

2.3 Module 38

2.3.1配置Loader 38

2.3.2 noParse 40

2.3.3 parser 41

2.4 Resolve 41

2.4.1 alias 42

2.4.2 mainFields 42

2.4.3 extensions 43

2.4.4 modules 43

2.4.5 descnptionFiles 44

2.4.6 enforceExtension 44

2.4.7 enforceModuleExtension 44

2.5 Plugin 44

2.6 DevServer 45

2.6.1 hot 45

2.6.2 inline 46

2.6.3 historyApiFallback 46

2.6.4 contentBase 47

2.6.5 headers 48

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 50

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的函数 59

2.9.3导出多份配置 60

2.10总结 61

第3章 实战 62

3.1使用ES6语言 63

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 76

3.6使用React框架 77

3.6.1 React的语法特征 77

3.6.2 React与Babel 78

3.6.3 React与TypeScript 79

3.7使用Vue框架 80

3.7.1认识Vue 81

3.7.2接入Webpack 82

3.7.3使用TypeScript编写Vue应用 83

3.8使用Angular2框架 85

3.8.1认识Angular2 85

3.8.2接入Webpack 88

3.9为单页应用生成HTML 89

3.9.1引入问题 89

3.9.2解决方案 90

3.10管理多个单页应用 94

3.10.1引入问题 94

3.10.2解决方案 96

3.11构建同构应用 100

3.11.1认识同构应用 100

3.11.2解决方案 101

3.12构建Electron应用 105

3.12.1认识Electron 105

3.12.2接入Webpack 108

3.13构建Npm模块 110

3.13.1认识Npm 110

3.13.2抛出问题 111

3.13.3使用Webpack构建Npm模块 112

3.13.4发布到Npm 117

3.14构建离线应用 118

3.14.1认识离线应用 118

3.14.2认识Service Workers 119

3.14.3接入Webpack 124

3.14.4验证结果 126

3.15搭配Npm Script 128

3.15.1认识Npm Script 128

3.15.2 Webpack为什么需要Npm Script 129

3.16检查代码 130

3.16.1代码检查具体是做什么的 130

3.16.2怎么做代码检查 131

3.16.3结合Webpack检查代码 133

3.17通过Node.js API启动Webpack 136

3.17.1安装和使用Webpack模块 136

3.172以监听模式运行 137

3.18使用Webpack Dev Middleware 138

3.18.1 Webpack Dev Middleware支持的配置项 139

3.18.2 Webpack Dev Middleware与模块热替换 140

3.19加载图片 142

3.19.1使用fiile-loader 142

3.19.2使用url-loader 143

3.20加载SVG 145

3.20.1使用raw-loader 146

3.20.2使用svg-inline-loader 147

3.21加载Source Map 148

3.21.1该如何选择 150

3.21.2加载现有的Source Map 150

3.22实战总结 151

第4章 优化 153

4.1缩小文件的搜索范围 154

4.1.1优化Loader配置 154

4.1.2优化resolve.modules配置 155

4.1.3优化resolve.mainFields配置 156

4.1.4优化resolve.alias配置 157

4.1.5优化resolve.extensions配置 159

4.1.6优化module.noParse配置 159

4.2使用DllPlugin 160

4.2.1认识DLL 160

4.2.2接入Webpack 161

4.3使用HappyPack 166

4.3.1使用HappyPack 167

4.3.2 HappyPack的原理 170

4.4使用ParallelUglifyPlugin 170

4.5使用自动刷新 173

4.5.1文件监听 173

4.5.2自动刷新浏览器 176

4.6开启模块热替换 180

4.6.1模块热替换的原理 180

4.6.2优化模块热替换 184

4.7区分环境 186

4.7.1为什么需要区分环境 186

4.7.2如何区分环境 186

4.7.3结合UglifyJS 188

4.7.4第三方库中的环境区分 188

4.8压缩代码 189

4.8.1压缩JavaScript 190

4.8.2压缩ES6 192

4.8.3压缩CSS 193

4.9 CDN加速 195

4.9.1什么是CDN 195

4.9.2接入CDN 196

4.9.3用Webpack实现CDN的接入 198

4.10使用Tree Shaking 200

4.10.1认识Tree Shaking 200

4.10.2接入Tree Shaking 201

4.11提取公共代码 204

4.11.1为什么需要提取公共代码 204

4.11.2如何提取公共代码 205

4.11.3如何通过Webpack提取公共代码 206

4.12分割代码以按需加载 209

4.12.1为什么需要按需加载 209

4.12.2如何使用按需加载 209

4.12.3用Webpack实现按需加载 210

4.12.4按需加载与ReactRouter 212

4.13使用Prepack 215

4.13.1认识Prepack 215

4.13.2接入Webpack 216

4.14开启Scope Hoisting 217

4.14.1认识Scope Hoisting 217

4.14.2使用Scope Hoisting 218

4.15 输出分析 219

4.15.1官方的可视化分析工具 220

4.15.2 webpack-bundle-analyzer 224

4.16优化总结 226

第5章 原理 233

5.1工作原理概括 234

5.1.1基本概念 234

5.1.2流程概括 234

5.1.3流程细节 235

5.2输出文件分析 238

5.3编写Loader 245

5.3.1 Loader的职责 246

5.3.2 Loader基础 247

5.3.3 Loader进阶 247

5.3.4其他Loader API 250

5.3.5加载本地Loader 251

5.3.6实战 253

5.4编写Plugin 254

5.4.1 Compiler和Compilation 255

5.4.2事件流 256

5.4.3常用的API 257

5.4.4实战 261

5.5调试Webpack 262

5.6原理总结 265

附录A常用的Loader 266

附录B 常用的Plugin 270

附录C Webpack的其他学习资源 273