前言
前阵子刚好遇到几个关于 webpack 方面的需求，特意找了一下这方面的书籍，阅读了一下，收益还是有一点，特此笔记记录一下。
很多小伙伴估计会说 webpack 这种快速变化的技术，书籍难免会过时了，还不如直接看官方文档。我对此保持中立态度，因为这本书除了实践外，还提到了很多关于 webpack 我不知道的原理知识。但不可否认，这本书确实有些地方已经过时（用的 webpack 3）大家看的时候取其精华，去其槽粕吧
另外我看的也是电子书，线上也有 深入浅出 Webpack 电子书[1] 书籍（阅读体验不好、需要手动去蒙层）
入门
什么构建？
构建就是将源代码转换成可执行的 JavaScript 文件、HTML、CSS 代码
包括以下：代码转换、文件优化、代码分割、模块合并等等
npm script 是什么？
Npm Script 是一个任务执行者，底层原理是通过调用 shell 去执行脚本命令
eg: 以下代码执行 npm run start 则等同于执行 node build/dev-server.js
代码语言：javascript复制"scripts": {
"start": "node build/dev-server.js"
}另外关于 npm script 的文章，推荐阮一峰的一篇博客—— npm scripts 使用指南- 阮一峰的网络日志[2]
官方的 DevServer 是怎么运作的？
Devserver 会启动一个 HTTP 服务器用于服务网页请求，同时会帮忙启动 webpack，并接收 webpack 发出的文件变更信号，通过 webSocket 协议自动刷新网页做到实时预览
为什么直接修改 index.html 不会更新
因为 webpack 监听的文件包括，从 entry 的文件开始，编译它（们）所依赖的文件，但是 index.html 是不属于这个系统中的（相对独立的文件）
解决方法：通过自定义插件，将其加入监听的队列
配置
crossOriginLoading 配置什么内容？
通过 crossOriginLoading 可以配置异步插入标签的 crossOrigin 值，具体 crossOrigin 值有什么用，可以看 [html] script的crossorigin属性[3]，其中有一项最近刚好遇到过，就是配置成 anonymous 之后，可以获取到详细的报错信息。我理解是受同源策略的影响，一般只会显示 window.onerror 这种比较模糊的报错信息
优化
什么是动态链接库
在 windows 系统中，我们会经常看到 .dll 为后缀的文件，这种文件叫做动态链接库，在一个动态链接库中可以包含为其他模块调用的函数和数据
DLL 的原理是什么？为什么会大大提升编译速度？
将模块抽离，打包到动态链接库，一个动态链接库可以包含多个模块，当需要导入的模块存在于动态链接库中，不需要编译，直接从动态链接库中获取
HappyPack的构建原理是什么？
由于 JavaScript 是单线程模型，所以要想发挥多核 CPU 的功能，就只能通过多进程实现。将任务分解给多个子进程去并发执行，子进程处理后再将结果发送给主进程，这样就可以提升构建的速度了
使用 ParallelUglifyPlugin 多进程压缩的原理
将多个文件的压缩工作分配给多个子进程去完成，每个子进程还是通过 UglifyJS 去压缩代码，但是变成了并行执行
文件监听的工作原理
采取一种类似轮询的机制，获取当前获取的时间和最后一次保存的最后编辑时间不一致则认为该文件发生了变化，watchOptions.poll 设置了定时检查的周期，具体就是每秒检查多少次
文件监听性能优化
设置等待时间，监听到修改并不会立即刷新，会等待一定的时间，是防止频繁修改导致卡死，可以通过 watchOptions.aggregateTimeout 设置
自动刷新浏览器的原理
DevServer默认原理：通过在开发的网页中注入客户端的代码，通过代理客户端去刷新整个页面
iframe 原理：将开发的网页装进一个 iframe 中，通过刷新 iframe 达到自动刷新的效果
接入 CDN 怎么避免缓存问题
针对 HTML 文件，不放到 CDN，放在自己的服务器，不开启缓存
JavaScript、CSS、图片等文件，上传到服务器，采取 hash 值方法
接入 CDN 怎么避免请求数量限制问题
同一个时刻同一个域名下资源的并行数量有限，可以放置不同的域，而且可以通过（rel="prefetch"）预解析域名
开启 Scope Hoisting 的原理
原理：分析各个模块的依赖关系，尽可能将被打散的模块合并到一个函数中，但前提不能造成代码冗余，因此只有那些被引用一次的代码才有可能被合并
原理
这一部分，之前我的一篇文章 初识 webpack 原理——自定义插件[4] 就是有所参考这部分内容，感兴趣的可以阅读下
References
[1] 深入浅出 Webpack 电子书: https://webpack.wuhaolin.cn/
[2] npm scripts 使用指南- 阮一峰的网络日志: http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
[3] [html] script的crossorigin属性: https://www.jianshu.com/p/a45c9d089c93
[4] 初识 webpack 原理——自定义插件: https://juejin.im/post/5d21cfc45188255ca4344123
