问题 ​

1. 有哪些常见的 loader，他们是做什么的？ ​

2. 有哪些常见的 plugin，他们是做什么的？ ​

3. 说说 loader 与 plugin 的区别？ ​

• Loader 本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。 因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。
• Plugin 就是插件，基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
• Loader 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数) 等属性。
• Plugin 在 plugins 中单独配置，类型为数组，每一项是一个 Plugin 的实例，参数都通过构造函数传入。

4. 运行 npm run xxx 做了什么？ ​

5. 说说 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。

6. 如何优化打包文件体积？ ​

7. 说一说 loader 的实现思路 ​

Loader 支持链式调用，所以开发上需要严格遵循“单一职责”，每个 Loader 只负责自己需要负责的事情。

8. 说一说 plugin 的实现思路 ​

Webpack 在运行的生命周期中会广播许多事件，Plugin 可以监听这些事件，在特定的钩子函数中添加需要的功能。

9. 说说 babel 的实现原理？ ​

Babel 的主要功能是对代码进行转义。主要是解决兼容问题，如将 ES6 代码转为 ES5，也可以实现一些语法优化

主要以下三个阶段：

• 解析（Parser）：将代码解析生成3 AST
  • 词法分析：将代码字符串分割为 token 流，即语法单元数组
  • 语法分析：分析 token 流，并生成 AST
• 转换（Transformer）：访问 AST 的节点进行变换操作生成新的 AST
• 生成（Generate）：以新的 AST 为基础生成 JS 代码

10. 如何优化 webpack 的构建速度 ​

• 使用高版本的 webpack 与 node.js
• 使用 thread-loader 多线程构建
• 缩小打包范围：
  • exclude/include 确定 loader 的规则范围
  • noParse 对不需要解析的库进行忽略
  • 合理使用 alias
• DLL
  • 使用 DllPlugin 进行分包，让一些不会被改动的代码打包为静态资源
• 缓存
  • bable 开启缓存
  • terser-webpack-plugin 开启缓存
  • 使用 cache-loader 或者 hard-source-webpack-plugin
• 动态 Polyfill
  • 采用 polyfill-service 只给用户返回需要的polyfill

11. sourceMap 是什么？ ​

sourceMap 是一项将编译、打包、压缩后的代码映射回源代码的技术，由于打包压缩后的代码并没有阅读性可言，一旦在开发中报错或者遇到问题，直接在混淆代码中debug问题会带来非常糟糕的体验，sourceMap可以帮助我们快速定位到源代码的位置，提高我们的开发效率。sourceMap 其实并不是 Webpack 特有的功能，而是 Webpack 支持 sourceMap，像 JQuery 也支持 souceMap 。