构建配置
构建流程
1.初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
2.开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
3.确定入口：根据配置中的 entry 找出所有的入口文件
4.编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5.完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6.输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7.输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统
简单来说：
初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler
编译：从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理
输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中
打包原理
Webpack 实际上为每个模块创造了一个可以导出和导入的环境，本质上并没有修改 代码的执行逻辑，代码执行顺序与模块加载顺序也完全一致
source map
source map是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。
一旦有sourc map出现报错，会直接定位到开发状态下的对应文件，而不是打包后的文件
map文件只要不打开开发者工具，浏览器是不会加载的
如何提高webpack的构建速度
1.通过externals配置来提取常用库
2.利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
3.使用Happypack 实现多线程加速编译
lazy loading（模块懒加载）
借助import()语法异步引入组件，实现文件懒加载
polyfill babel-polyfill
babel-polyfill解决低版本浏览器不兼容问题
热更新原理（Hot Module Replacement =》 缩写为HMR）
webpack-dev-server(WDS)是一个基于express的web server，监听8080，server内部调用webpack，这样的好处是提供了热加载和热替换的功能
HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS 与浏览器之间维护了一个Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起Ajax请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起jsonp请求获取该chunk的增量更新。
loader实现原理
webpack是基于Node的所以webpack只能识别.js文件，所以针对其他的文件就需要转译，这时候就需要用到我们的loader了
loader特点
1.loader的执行顺序和代码书写的顺序是相反的，即：最后一个loader最先执行，第一个loader最后执行
2.第一个执行的loader会接收源文件做为参数，下一次执行的loader会接收前一个loader执行的返回值做为参数
loader编写原则
1.单一原则: 每个 Loader 只做一件事；
2.链式调用: Webpack 会按顺序链式调用每个 Loader；
3.统一原则: 遵循 Webpack 制定的设计规则和结构，输入与输出均为字符串，各个 Loader 完全独立，即插即用
plugin实现原理
plugin可以在webpack运行到某个时刻帮你做一些事情. plugin会在webpack初始化时,给相应的生命周期函数绑定监听事件,直至webpack执行到对应的那个生命周期函数,plugin绑定的事件就会触发.
Compiler 对象包含了当前运行Webpack的配置，包括entry、output、loaders等配置，这个对象在启动Webpack时被实例化，而且是全局唯一的。Plugin可以通过该对象获取到Webpack的配置信息进行处理
Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的 Compilation 将被创建。Compilation 对象也提供了很多事件回调供插件做扩展。通过 Compilation 也能读取到 Compiler 对象
Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译
npm run xxx
npm run xxx其实就是从package.json里找到scripts里对应的xxx，执行xxx的命令，例如：基于vue脚手架搭建的项目执行npm run serve实际上执行了vue-cli-service serve，但命令行窗口为何不可以直接执行vue-cli-service serve，因为操作系统没有vue-cli-service的命令
既然vue-cli-service这条指令不存在操作系统，为什么能执行npm run serve？因为在安装依赖的时候，例如npm i @vue/cli-service，npm在安装这个依赖的时候，会在node_modules/.bin目录中创建好vue-cli-service为名字的可执行文件。.bin目录下不是npm包，而是一个个软链接，当使用npm run serve执行vue-cli-service serve时，虽然没有安装vue-cli-service的全局命令，但是npm会到node_modules/.bin中找到vue-cli-service文件作为脚本来执行，相当于执行了node_modules/.bin/vue-cli-service serve
网友评论