# loader

`loader` 让 `webpack` 能够去处理那些非 `Javescript` 文件（`webpack` 自身只理解 `Javascript`）。`loader` 可以将所有类型的文件转换为 `webpack` 能够处理的有效模块，然后你可以利用 `webpack` 的打包能力，对它们进行处理。

{% hint style="success" %}
 注意，loader 能够 `import` 导入任何类型的模块（例如 `.css` 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。
{% endhint %}

在更高层面，在 webpack 的配置中 **loader** 有两个目标：

1. `test` 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. `use` 属性，表示进行转换时，应该使用哪个 loader。

### 栗子

```javascript
const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;
```