说说webpack中常见的loader？解决了什么问题？

loader的理解

---

---

一、webpack是什么

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

二、loader是什么

loader的作用说白了就是将一种形式的代码通过逻辑转变成另一种形式的代码，转换后的代码webpack就能识别了。

三、常见的loader：

image-loader：加载并且压缩图片文件
css-loader：帮助webpack打包处理css文件，使用css-loader必须要配合使用style-loader
style-loader：用于将css编译完成的样式，挂载到页面的style标签上。但是要注意loader执行顺序，style-loader要放在第一位，loader都是从后往前执行
babel-loader：把 ES6 转换成 ES5
sass-loader: css预处理器，能更好的编写css
postcss-loader: 用于补充css样式在各种浏览器的前缀，很方便，不需要手动写了
eslint-loader:用于检查代码是否符合规范，是否存在语法错误
url-loader:处理图片类型资源，可以根据图片的大小进行不同的操作，如果图片大小大于指定大小，则将图片进行资源打包，否则将图片转换为base64格式字符串，再把这个字符串打包到 JS文件里。

特性

1.loader 可以是同步的，也可以是异步的
2.loader 运行在 Node.js 中，并且能够执行任何操作
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
插件(plugin)可以为 loader 带来更多特性
3.loader 能够产生额外的任意文件
4.可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言翻译和更多其他特性
5.loader支持链式调用