前端面试题——webpack篇(五)

1、webpack与grunt、gulp的不同？

三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。

grunt和gulp是基于任务和流（Task、Stream）的，先找到一个文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。

webpack是基于入口的。webpack会自动解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。

2、有哪些常见的Loader？他们是解决什么问题的？

• image-loader：加载并且压缩图片文件

• babel-loader：把 ES6 转换成 ES5

• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性

• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。

• eslint-loader：通过 ESLint 检查 JavaScript 代码

3、有哪些常见的Plugin？他们是解决什么问题的？

• define-plugin：定义环境变量

• commons-chunk-plugin：提取公共代码

4、Loader和Plugin的不同？

用途不同

• Loader叫做为"加载器"。webpack原生是只能解析js文件，Loader的作用是让webpack拥有了加载和解析非js文件的能力。

• Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性，比如定义环境变量，提取公共代码。

5、webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全

Webpack 的运行流程是一个串行的过程：先根据配置文件信息读取参数，根据参数初始化compiler对象，找到构建的入口文件，加载所有配置的插件，调用配置的 Loader 对所有的模块进行解析成浏览器可识别的文件格式，最终输出到出口文件中。

6、webpack的热更新是如何做到的？说明其原理？

webpack的热更新指的在启动本地服务后，修改的模块文件代码会自动更新，而无需手动去刷新浏览器。

• 热更新的核心就是客户端与服务端建立的websocket长连接，双方可以通信。 当服务器监听到修改了文件代码，会生成两个文件.json（manifest文件）和.js文件（update chunk）

• 通过建立的长连接，服务器可以直接将这两个文件主动发送给客户端浏览器

• 浏览器拿到文件后，对其进行解析，针对修改的模块进行更新。

7、如何提高webpack的构建速度？

压缩代码。删除多余的代码、注释、简化代码的写法等等方式。

利用CDN加速。将引用的静态资源路径修改为CDN上对应的路径。

8、webpack是什么

• WebPack 是一个模块打包工具，可以使用WebPack来管理和解析模块，最终编绎输出成可被浏览器识别的HTML、js、CSS以及一些静态文件等。