Loader

1. 什么是 Loader

2. 特性

3. 常见Loader

答：

loader 用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件. webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

在webpack内部中，任何文件都是模块，不仅仅只是js文件

默认情况下，在遇到import或者require加载模块的时候，webpack只支持对js 和 json 文件打包. 像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析

在加载模块的时候，执行顺序如下：

当 webpack 碰到不识别的模块的时候，webpack 会在配置的中查找该文件解析规则

关于配置loader的方式有三种：

2. 特性

因为loader支持链式调用，链中的每个loader会处理之前已处理过的资源，最终变为js代码。顺序为相反的顺序执行，即上述执行方式为sass-loader、css-loader、style-loader

除此之外，loader的特性还有如下：

可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言翻译和更多其他特性

3. 常见loader

css-loader

rules: [
  ...,
 {
  test: /\.css$/,
    use: {
      loader: "css-loader",
      options: {
         // 启用/禁用 url() 处理
         url: true,
         // 启用/禁用 @import 处理
         import: true,
        // 启用/禁用 Sourcemap
        sourceMap: false
      }
    }
 }
]

补充

补充：loader 三种配置写法：

use 数组（推荐，可链式）：
rules: [{ test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }]
use 对象（带 options）：
use: { loader: 'css-loader', options: { modules: true } }
loader 单值（只有一个 loader 时）：
rules: [{ test: /.css$/, loader: 'css-loader' }]
enforce 取值：pre（eslint-loader 之类先跑）、post（css-minimizer 之类最后跑）；loader 链同优先级下从右到左执行。