分享今天的主题之前，我们先来回顾下，前端的模块化历史。
为什么要回顾这个模块化历史呢？因为webpack是一个模块打包器。
《旧唐书·魏徵传》说，以史为镜，可以知兴替。
通过这个历史回顾，了解一下为什么兴起今天的webpack。
当然，现在暂时看不到webpack被替换的迹象。
前端的模块化历史
早期，一个jQuery，一个js文件。老夫从来都是一把梭[jpg]。
前端脚本越写越多，代码越来越复杂，前端代码管理越来越是个问题。
因为很多接口会暴露到window全局变量上。全局变量容易出现冲突，而且需要开发人员主观来解决依赖关系。
有问题不是坏事，有问题就有需求，有需求就有市场。
各种模块化解决方案百花齐放。
也没有百花，主要是三花。
模块加载器，CommonJS,AMD,CMD,ES6的模块加载。
webpack理念领先，也就是想法不错，然而早期版本手法差了点，尤其是文档。
因为 v4 之前的 webpack 配置过于繁琐复杂，以至于前端亟需一个专门的职位(webpack 配置工程师)来专门负责 webpack 配置文件的编写和维护。
一条命令语句
分析一个项目，一般从package.json的命令入口scripts开始。
而我们开发时，通常启动输入npm run dev，对应是
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
别小看这么一条语句。蕴含的信息量相当大。
首先webpack-dev-server是一个Node.jsWeb开发框架（基于express或者koa）的二次封装。
它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时。
--inline启用内联模式。启动webpack-dev-server后，你修改的代码结果会实时插入到bundle中。
--progress,输出打包进度到控制台。
--config指定对应的配置文件。
以EventSource通信为例，分享下webpack-dev-server热更新过程。
1.Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)
2.页面首次打开后，服务端与客户端通过 EventSource 建立通信渠道，把下一次的 hash 返回前端
3.客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash
4.修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端
5.客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档
6.hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件， 继而实现 UI 无刷新更新。
参考：https://www.jianshu.com/p/652fbae768bf
HTTP协议是单向通信协议，只有客户端发起HTTP请求，服务端才会返回数据。
那么服务器有变化，如何通知客户端获取这个变化。
老方式有，ajax轮询和长轮询，iframe永久帧。
新方式有，EventSource规范，WebSocket协议。
WebSocket协议是双向通信协议，在建立连接之后，客户端和服务器都可以主动向对方发送或接受数据。
参考：https://www.cnblogs.com/unclekeith/p/8087182.html
技术知识这个东西就是个无底洞。
深挖下去总有一大片坑等你填埋。
到最后是不是镜花水月一场空呢？
《庄子·养生主》说，吾生也有涯,而知也无涯.以有涯随无涯,殆已!已而为知者,殆而已矣!
以有限的生命追求无限的知识，如同夸父追日般一样的被累死。
司马迁的《报任安书》说，人固有一死，或重于泰山，或轻于鸿毛。当然累死也算一种。
累不累死不是关键，关键是追求知识的过程中找到乐趣。
乐趣来自于哪里？来自于知识之间的联系，来自于无中生有，怎么从什么也没有变出这个知识来。
我们找到这个乐趣，也就不知疲倦了，不知累死为何物。
回到刚才的例子，我们从一条命令语句找到背后的依赖库，依赖库背后的运行机制，运行机制背后的协议，这个协议解决的问题，这个问题背后的人的内心需求。
不仅人需要互相交流，以此类推，客户端和服务端也是。
vue webpack template配置
解决的主要问题：
JS代码分割和懒加载及其压缩模式。
CSS语法解析和提取。
资源（图片，声音，字体）文件处理。
JS代码分割策略
常见的策略是分离出第三方库、自定义公共模块、webpack运行时文件，各个自身业务模块。
先来看下目录结构。
build
├── build.js // npm run build所执行的脚本
├── check-versions.js // 检查npm和node的版本
├── logo.png
├── utils.js // 一些工具方法，主要用于生成cssLoader和styleLoader配置
├── vue-loader.conf.js // vueloader的配置信息
├── webpack.base.conf.js // dev和prod的公共配置
├── webpack.dev.conf.js // dev环境的配置
└── webpack.prod.conf.js // prod环境的配置
config
├── dev.env.js //dev环境变量配置
├── index.js // dev和prod环境的一些基本配置
└── prod.env.js // prod环境变量配置
先看webpack.dev.conf.js文件里有
const utils = require('./utils') // 一些工具方法，主要用于生成cssLoader和styleLoader配置
const config = require('../config') // dev和prod环境的一些基本配置
const baseWebpackConfig = require('./webpack.base.conf') // dev和prod的公共配置
三个业务文件依赖。
参考：
一字一句的搞懂vue-cli之vue webpack template配置
其它代码细节
版本号检查
依赖了第三方NPM包chalk，semver，shelljs，child_process。
chalk用来输出美化命令行输出信息，比如颜色等。
semver用来版本号处理，比如对x.x.x版本号的比较等。
shelljs用来处理命令行命令。shell.which返回系统可执行命令的来源路径。
child_process用来执行命令行命令。
PS：shelljs也能执行命令行命令，为什么用child_process执行？我猜是child_process执行效率更高。因为shelljs.exec本质还是执行child_process。参考https://github.com/shelljs/shelljs#execcommand--options--callback
检查逻辑：当前系统环境的node版本和npm版本，和package.json声明的版本进行比较。
webpack打包
css语法解析和提取，提取js公共代码和代码压缩，eslint检查，资源（图片，声音，字体）文件处理。
CSS语法解析和提取
因为要对各种类型的css语法解析，所以用到以下的loader。
Plain Text
css-loader，postcss-loader，less-loader，sass-loader，stylus-loader
因为这些loader的配置语句相似，为了减少重复语句，使用工厂方法包装。
对于production环境，免不了把<style>标签嵌入方式改为css文件提取方式，默认是生成css压缩文件的sourcemap。
文件提取，自然是用到extract-text-webpack-plugin插件。
提取js公共代码和代码压缩
常见的提取策略是分离出第三方库、自定义公共模块、webpack运行文件，自身业务模块，
以及当加载异步模块，且有多个异步模块共同依赖的模块asyncCommon，我们期望这个模块asyncCommon跟异步模块并行加载。
所以有如下配置语句：
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async', // 异步加载的公共文件打包成vendor-async.[chunkHash].js名称
/*
children为true，代表source chunks为code split出来的children chunks；
code split分离出来的模块基本是异步加载；
意味着共同依赖的模块跟异步模块并行异步加载。
当然如果共同依赖是同步模块加载，那么就会打包到首屏加载的app.bundle。
children为false，代表source chunks是entry chunks（入口文件），
意味着共同依赖的模块就会被打包到首屏加载的app.bundle。
*/
children: true,
minChunks: 3 // 有至少3个chunks共同依赖的公共模块，就把该公共模块抽取出来独立打包。
}),
