说说webpack中常见的Loader？解决了什么问题？- 题目详情 - 前端面试题宝典
1、loader 是什么
loader是 webpack 最重要的部分之一。
通过使用不同的 loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理。
在 webpack 内部中，任何文件都是模块，不仅仅只是js文件。默认情况下，在遇到 import 或者 load 加载模块的时候， webpack 只支持对 js 文件打包，像 css、sass、png 等这些类型的文件的时候，webpack 则无能为力，这时候就需要配置对应的 loader 进行文件内容的解析。
在加载模块的时候，执行顺序如下：
当 webpack 碰到不识别的模块的时候，webpack 会在配置的中查找该文件解析规则。
关于 loader 的配置，我们是写在 module.rules 属性中，属性介绍如下：
代码编写，如下形式：
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
{ loader: 'sass-loader' }
]
}
]
}
};从上述代码可以看到，在处理 css 模块的时候，use 属性中配置了三个 loader 分别处理 css 文件。
因为 loader 支持链式调用，链中的每个 loader 会处理之前已处理过的资源，最终变为 js 代码。
同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，从下往上
除此之外，loader 的特性还有如下：
2、loader 作用
① 实现对不同格式文件的处理，比如将 Scss 转换为 CSS，或将 TypeScript 转化为Javascript；
② 可以编译文件，从而使其能够添加到依赖关系中
3、常用的 loader
如果只通过 css-loader 加载文件，这时候页面代码设置的样式并没有生效。
原因在于， css-loader 只是负责将 .css 文件进行一个解析，而并不会将解析后的 css 插入到页面中。如果我们希望再完成插入 style 的操作，那么我们还需要另外一个 loader，就是 style-loader
开发中，我们也常常会使用 less、sass、stylus 预处理器编写 css 样式，使开发效率提高，这里需要使用 less-loader、sass-loader
