loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “ load (加载)” 模块时预处理文件。因此，loader 类似于其他构建工具中”任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

Loader 是 webpack 的核心特性，借助于 Loader 可以加载任何类型的资源，Loader 的工作原理就是负责资源文件从输入到输出的转换。

常用加载器

css-loader

把 css 代码添加到 js 模块中。

style-loader

把 js 模块的 css 代码添加到页面头部的 style 上面。

file-loader

大多数 loader 都像 css-loader 一样把资源模块转换为 js 代码的实现方式去工作，但是类似于图片、字体这些文件都是无法通过 js 的方式去表示的，所以需要用到 file-loader。

url-loader

file-loader 是将资源文件以文件的形式转到 dist 目录中。而 url-loader 是将资源文件转成 base_64 的形式写在 _js中。但是文件体积过大会导致打包后的 js 过大，加载负担更大。url-loader 如果使用 limit, 则必须安装 file-loader。

html-loader

在 js 中加载 html 文件，html 的文件资源也可以使用 loader。

配置

webpack.config.js

  1. module.exports = {
  2.     module: {
  3.         rules: [
  4.             { test: /\.css$/, use: 'css-loader' },
  5.             { test: /\.ts$/, use: 'ts-loader' },
  6.         ],
  7.     },
  8. };