您对webpack真的了解吗？

一、什么是loader？

Loader用于对模块文件进行编译转换和加载处理，在module.rules数组中进行配置，它用于告诉Webpack在遇到哪些文件时使用哪些Loader去加载和转换。Loader还可以通过querystring或object指定选项参数。

1.常用的loader

css-loader 允许将css文件通过require的方式引入，并返回css代码
less-loader 处理less
ostcss-loader 用postcss来处理CSS
file-loader 分发文件到output目录并返回相对路径
babel-loader 用babel来转换ES6文件到ES5
vue-loader 用于vue解析
url-loader 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url

loader特性

loader 从右到左地取值(evaluate)/执行(execute)
loader 支持链式传递,链中的每个 loader 会将转换应用在已处理过的资源上
loader 也可以内联显示指定
loader 可以是同步的，也可以是异步的
loader 运行在 Node.js 中，并且能够执行任何 Node.js 能做到的操作
loader 可以通过 options 对象配置
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
loader 能够产生额外的任意文件

1. loader是webpack核心,用于对模块的源代码进行转换
2. loader支持链式调用，从右至左执行，支持同步或异步函数

二、wepack打包流程

1.识别入口文件
2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖-）
3.webpack做的就是分析代码。转换代码，编译代码，输出代码
4.最终形成打包后的代码

Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader规则进行相应的转换处理，对Module进行转换后，再解析出当前Module依赖的Module，这些Module会以Entry为单位进行分组，即为一个Chunk。因此一个Chunk，就是一个Entry及其所有依赖的Module合并的结果。最后Webpack会将所有的Chunk转换成文件输出Output。在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务。

三、什么是plugins？

在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。plugin是一个扩展器，它丰富了wepack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

1.Webpack有哪些常见的Plugin

2.Plugin的特性

• 是一个独立的模块
• 模块对外暴露一个 js 函数
• 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply方法
• apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子，钩子的回调中能拿到当前编译的compilation 对象，如果是异步编译插件的话可以拿到回调 callback
• 完成自定义子编译流程并处理 complition
• 对象的内部数据 如果异步编译插件的话，数据处理完成后执行 callback 回调