共计 2988 个字符，预计需要花费 8 分钟才能阅读完成。
Webpack
https://zhuanlan.zhihu.com/p/44438844/
https://segmentfault.com/a/1190000014148611
1.有哪些常见的loader？你用过那些 loader？
raw-loader：加载文件原始内容（utf-8）file-loader：把文件输入到一个文件夹中，在代码中通过绝对 URL 去援用输入的文件 (解决图片和字体)
url-loader：与 file-loader 相似，区别是用户能够设置一个阈值，大于阈值会交给 file-loader 解决，小于阈值时返回文件 base64 模式编码 (解决图片和字体)
source-map-loader：加载额定的 Source Map 文件，以不便断点调试
svg-inline-loader：将压缩后的 SVG 内容注入代码中
image-loader：加载并且压缩图片文件
json-loader 加载 JSON 文件（默认蕴含）handlebars-loader: 将 Handlebars 模版编译成函数并返回
babel-loader：把 ES6 转换成 ES5
ts-loader: 将 TypeScript 转换成 JavaScript
awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
sass-loader：将 SCSS/SASS 代码转换成 CSS
css-loader：加载 CSS，反对模块化、压缩、文件导入等个性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
postcss-loader：扩大 CSS 语法，应用下一代 CSS，能够配合 autoprefixer 插件主动补齐 CSS3 前缀
eslint-loader：通过 ESLint 查看 JavaScript 代码
tslint-loader：通过 TSLint 查看 TypeScript 代码
mocha-loader：加载 Mocha 测试用例的代码
coverjs-loader：计算测试的覆盖率
vue-loader：加载 Vue.js 单文件组件
i18n-loader: 国际化
cache-loader: 能够在一些性能开销较大的 Loader 之前增加，目标是将后果缓存到磁盘里
2. 有哪些常见的Plugin？你用过哪些 Plugin？
`define-plugin：定义环境变量 (Webpack4 之后指定 mode 会主动配置)
ignore-plugin：疏忽局部文件
html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
web-webpack-plugin：可不便地为单页利用输入 HTML，比 html-webpack-plugin 好用
uglifyjs-webpack-plugin：不反对 ES6 压缩 (Webpack4 以前)
terser-webpack-plugin: 反对压缩 ES6 (Webpack4)
webpack-parallel-uglify-plugin: 多过程执行代码压缩，晋升构建速度
mini-css-extract-plugin: 拆散款式文件，CSS 提取为独立文件，反对按需加载 (代替 extract-text-webpack-plugin)
serviceworker-webpack-plugin：为网页利用减少离线缓存性能
clean-webpack-plugin: 目录清理
ModuleConcatenationPlugin: 开启 Scope Hoisting
speed-measure-webpack-plugin: 能够看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)
webpack-bundle-analyzer: 可视化 Webpack 输入文件的体积 (业务组件、依赖第三方模块)`2. 那你再说一说 Loader 和 Plugin 的区别？
不同的作用
Loader 直译为 ” 加载器 ”。Webpack 将所有文件视为模块，然而 webpack 原生是只能解析 js 文件，如果想将其余文件也打包的话，就会用到 loader。所以 Loader 的作用是让 webpack 领有了加载和解析非 JavaScript 文件的能力。
Plugin 直译为 ” 插件 ”。Plugin 能够扩大 webpack 的性能，让 webpack 具备更多的灵活性。在 Webpack 运行的生命周期中会播送出许多事件，Plugin 能够监听这些事件，在适合的机会通过 Webpack 提供的 API 扭转输入后果。
不同的用法
Loader 在 module.rules 中配置，也就是说他作为模块的解析规定而存在。类型为数组，每一项都是一个 Object，外面形容了对于什么类型的文件（test），应用什么加载 (loader) 和应用的参数（options）
Plugin 在 plugins 中独自配置。类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。
3. Webpack构建流程简略说一下
Webpack 的运行流程是一个串行的过程，从启动到完结会顺次执行以下流程：
初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步失去的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 办法开始执行编译；
确定入口：依据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件登程，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都通过了本步骤的解决；
实现模块编译：在通过第 4 步应用 Loader 翻译完所有模块后，失去了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输入资源：依据入口和模块之间的依赖关系，组装成一个个蕴含多个模块的 Chunk，再把每个 Chunk 转换成一个独自的文件退出到输入列表，这步是能够批改输入内容的最初机会；
输入实现：在确定好输入内容后，依据配置确定输入的门路和文件名，把文件内容写入到文件系统。
在以上过程中，Webpack 会在特定的工夫点播送出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件能够调用 Webpack 提供的 API 扭转 Webpack 的运行后果。
4. 说一下 Webpack 的热更新原理吧
Webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。这个机制能够做到不必刷新浏览器而将新变更的模块替换掉旧的模块。
HMR 的外围就是客户端从服务端拉去更新后的文件，精确的说是 chunk diff (chunk 须要更新的局部)，实际上 WDS 与浏览器之间保护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行比照。客户端比照出差别后会向 WDS 发动 Ajax 申请来获取更改内容(文件列表、hash)，这样客户端就能够再借助这些信息持续向 WDS 发动 jsonp 申请获取该 chunk 的增量更新。
后续的局部 (拿到增量更新之后如何解决？哪些状态该保留？哪些又须要更新？) 由 HotModulePlugin 来实现，提供了相干 API 以供开发者针对本身场景进行解决，像 react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。