webpack面试题

1.为什么需要打包工具（webpack）?

	我们在开发时，用的用到框架（React、Vue），ES6模块化语法，Less/Sass等CSS预处理器等语法进行开发，这样的代码想要在浏览器运行必须经过编译成浏览器能识别的JS、CSS语法才能允许。所以我们需要打包工具保住我们完成这些事。此外还有打包能压缩代码，做兼容性处理，提升代码性能等。

2.说说你对 webpack 的理解？

webpack 是一个静态模块打包工具。它会在内部从一个或者多个入库构建一个依赖图，然后将项目中所需的每一个模块组合成一个或者多个bundles进行输出，它们均为静态资源。输出的文件已经编译好了，可以运行在浏览器。webpack 具有打包压缩，编译兼容，能力扩展等功能，实现前端项目的模块化，高效地维护项目中的资源。

3.webpack五个核心概念

Entry(入口)： 是指webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
Output(输出)： 是指webpack打包后的资源bundles输出到哪里，如何命名。
loader(解析器)： webpack 只能理解js,json文件，loader让webpack能够处理其他类型文件，将它们转换为有效模块，以供应程序使用。
plugin(插件)： 用于执行范围更广的任务，插件范围包括，从打包优化和压缩，一直重新定义环境中的变量等。
**Mode(模式)：**提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

4.webpack的作用是什么吗？

**模块打包：**可以将不同模块文件整合在一起，并确保之间引用正确，执行有序。
编译兼容： 通过webpack 的Loader机制，可以编译转换诸如.less .vue .jsx这类浏览器无法识别的文件，让我们开发时使用新特性和新语法，提高开发效率。
**能力扩展：***通过webpack的Plugin机制，可以进一步实现诸如按需加载，代码压缩等功能，帮助我们提供工程效率以及打包输出的质量。

5.Loader是什么？

能够处理非js或者json文件，由于Webpack自身只理解JS、JSON,其他类型/后缀的文件都需要经过 loader 处理，并将它们转换为有效模块。loder可以同步的，也可以异步，支持链式调用，链中的每个loder会处理之前已处理的资源。
在加载模块的时候，执行顺序如下：

当 webpack 碰不到识别的模块时，就会在配置中查找该文件的解析规则
loader主要配置两个属性：
test:识别出哪些文件会被转换
use:定义在进行转换是，用那个loader

6.常见的哪些loaders?

7.Plugin是什么？

plugin 用于打包优化，资源管理，诸如环境变量。plugin 会运行在 webpack 的不同阶段，贯穿整个编译周期，目的在于解决 loader 无法实现的其他事。

8.常见的Plugin：

9. loader和plugin的区别

区别一：
loader运行在打包文件之前。
plugin 在整个编译周期都起到作用。
区别二：
loader在modules中配置，类型为数据，每一项都是Object,包含了test、use属性。
plugiin在plugin单独配置，类型为数组，每一项是一个plugin实例，参数都通过构造函数传入。
区别三：
在 webpack运行的生命周期中会广播出许多事件，plugin可以监听这些时间，在合适的时机通过webpackt提供的API改变输出结果
对于loader,实质是一个转换器，将A文件进行编译成B文件，操作的是文件，比如将A.scss转换为B.css，单纯的文件转换过程