第1章 入门

1.1前端的发展

1.1.1模块化

1.1.2新框架

1.1.3新语言

1.2常见的构建工具及对比

1.2.1 Npm Script

1.2.2 Grunt

1.2.3 Gulp

1.2.4 Fis3

1.2.5 Webpack

1.2.6 Rollup

1.2.7为什么选择Webpack

1.3安装Webpack

1.3.1安装Webpack到本项目

1.3.2安装Webpack到全局

1.3.3使用Webpack

1.4使用Loader

1.5使用Plugin

1.6使用DevServer

1.6.1实时预览

1.6.2模块热替换

1.6.3支持Source Map

1.7核心概念

第2章 配置

2.1 Entry

2.1.1 context

2.1.2 Entry类型

2.1.3 Chunk的名称

2.1.4配置动态Entry

2.2 Output

2.2.1 fiilename

2.2.2 chunkFilename

2.2.3 path

2.2.4 publicPath

2.2.5 crossOriginLoadmg

2.2.6 libraryTarget和library

2.2.7 library Export

2.3 Module

2.3.1配置Loader

2.3.2 noParse

2.3.3 parser

2.4 Resolve

2.4.1 alias

2.4.2 mainFields

2.4.3 extensions

2.4.4 modules

2.4.5 descnptionFiles

2.4.6 enforceExtension

2.4.7 enforceModuleExtension

2.5 Plugin

2.6 DevServer

2.6.1 hot

2.6.2 inline

2.6.3 historyApiFallback

2.6.4 contentBase

2.6.5 headers

2.6.6 host

2.6.7 port

2.6.8 allowedHosts

2.6.9 disableHostCheck

2.6.10 https

2.6.11 clientLogLevel

2.6.12 compress

2.6.13 open

2.7其他配置项

2.7.1 Target

2.7.2 Devtool

2.7.3 Watch和WatchOptions

2.7.4 Externals

2.7.5 ResolveLoader

2.8整体配置结构

2.9多种配置类型

2.9.1导出一个Function

2.9.2导出一个返回Promise的函数

2.9.3导出多份配置

2.10总结

第3章 实战

3.1使用ES6语言

3.1.1认识Babel

3.1.2接入Babel

3.2使用TypeScript语言

3.2.1认识TypeScript

3.2.2减少代码冗余

3.2.3集成Webpack

3.3使用Flow检查器

3.3.1认识Flow

3.3.2使用Flow

3.3.3集成Webpack

3.4使用SCSS语言

3.4.1认识SCSS

3.4.2接入Webpack

3.5使用PostCSS

3.5.1认识PostCSS

3.5.2接入Webpack

3.6使用React框架

3.6.1 React的语法特征

3.6.2 React与Babel

3.6.3 React与TypeScript

3.7使用Vue框架

3.7.1认识Vue

3.7.2接入Webpack

3.7.3使用TypeScript编写Vue应用

3.8使用Angular2框架

3.8.1认识Angular2

3.8.2接入Webpack

3.9为单页应用生成HTML

3.9.1引入问题

3.9.2解决方案

3.10管理多个单页应用

3.10.1引入问题

3.10.2解决方案

3.11构建同构应用

3.11.1认识同构应用

3.11.2解决方案

3.12构建Electron应用

3.12.1认识Electron

3.12.2接入Webpack

3.13构建Npm模块

3.13.1认识Npm

3.13.2抛出问题

3.13.3使用Webpack构建Npm模块

3.13.4发布到Npm

3.14构建离线应用

3.14.1认识离线应用

3.14.2认识Service Workers

3.14.3接入Webpack

3.14.4验证结果

3.15搭配Npm Script

3.15.1认识Npm Script

3.15.2 Webpack为什么需要Npm Script

3.16检查代码

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

3.16.2怎么做代码检查

3.16.3结合Webpack检查代码

3.17通过Node.js API启动Webpack

3.17.1安装和使用Webpack模块

3.172以监听模式运行

3.18使用Webpack Dev Middleware

3.18.1 Webpack Dev Middleware支持的配置项

3.18.2 Webpack Dev Middleware与模块热替换

3.19加载图片

3.19.1使用fiile-loader

3.19.2使用url-loader

3.20加载SVG

3.20.1使用raw-loader

3.20.2使用svg-inline-loader

3.21加载Source Map

3.21.1该如何选择

3.21.2加载现有的Source Map

3.22实战总结

第4章 优化

4.1缩小文件的搜索范围

4.1.1优化Loader配置

4.1.2优化resolve.modules配置

4.1.3优化resolve.mainFields配置

4.1.4优化resolve.alias配置

4.1.5优化resolve.extensions配置

4.1.6优化module.noParse配置

4.2使用DllPlugin

4.2.1认识DLL

4.2.2接入Webpack

4.3使用HappyPack

4.3.1使用HappyPack

4.3.2 HappyPack的原理

4.4使用ParallelUglifyPlugin

4.5使用自动刷新

4.5.1文件监听

4.5.2自动刷新浏览器

4.6开启模块热替换

4.6.1模块热替换的原理

4.6.2优化模块热替换

4.7区分环境

4.7.1为什么需要区分环境

4.7.2如何区分环境

4.7.3结合UglifyJS

4.7.4第三方库中的环境区分

4.8压缩代码

4.8.1压缩JavaScript

4.8.2压缩ES6

4.8.3压缩CSS

4.9 CDN加速

4.9.1什么是CDN

4.9.2接入CDN

4.9.3用Webpack实现CDN的接入

4.10使用Tree Shaking

4.10.1认识Tree Shaking

4.10.2接入Tree Shaking

4.11提取公共代码

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

4.11.2如何提取公共代码

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

4.12分割代码以按需加载

4.12.1为什么需要按需加载

4.12.2如何使用按需加载

4.12.3用Webpack实现按需加载

4.12.4按需加载与ReactRouter

4.13使用Prepack

4.13.1认识Prepack

4.13.2接入Webpack

4.14开启Scope Hoisting

4.14.1认识Scope Hoisting

4.14.2使用Scope Hoisting

4.15 输出分析

4.15.1官方的可视化分析工具

4.15.2 webpack-bundle-analyzer

4.16优化总结

第5章 原理

5.1工作原理概括

5.1.1基本概念

5.1.2流程概括

5.1.3流程细节

5.2输出文件分析

5.3编写Loader

5.3.1 Loader的职责

5.3.2 Loader基础

5.3.3 Loader进阶

5.3.4其他Loader API

5.3.5加载本地Loader

5.3.6实战

5.4编写Plugin

5.4.1 Compiler和Compilation

5.4.2事件流

5.4.3常用的API

5.4.4实战

5.5调试Webpack

5.6原理总结

附录A常用的Loader

附录B 常用的Plugin

附录C Webpack的其他学习资源