【webpack面试题】有哪些常见的Loader？它们是解决什么样问题的？

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。 更多的功能需要借助loaders和plugins完成。比如说：在代码中有一张图片需要进行打包，webpack可以把图片读出来，但是不能将图片当做js代码来读，所以需要一个加载器loader来帮助我们把图片的二进制数据转变为js代码，loader的作用说白了就是将一种形式的代码通过逻辑转变成另一种形式的代码，转换后的代码webpack就能识别了。loader的功能定位是转换代码

以下就是常见的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文件里。