Webpack中的Loader详解

Loader 是 Webpack 中用于处理模块的转换器。它们可以将文件从一种格式转换为另一种格式，比如将 TypeScript 转换为 JavaScript，将 SCSS 转换为 CSS 等。使用 Loader，可以使 Webpack 处理各种类型的文件，而不仅仅是 JavaScript。

1. Loader基础

1.1. 基础使用

Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式地经过多个翻译员翻译。

以处理 SCSS 文件为例：

1. SCSS 源代码会先交给 sass-loader 把 SCSS 转换成 CSS；

2. 把 sass-loader 输出的 CSS 交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等；

3. 把 css-loader 输出的 CSS 交给 style-loader 处理，转换成通过脚本加载的 JavaScript 代码；

可以看出以上的处理过程需要有顺序的链式执行，先 sass-loader 再 css-loader 再 style-loader。

以上处理Webpack相关配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: true,
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
};

1.2. Loader的职责

由上面的例子可以看出：一个 Loader 的职责是单一的，只需要完成一种转换。如果一个源文件需要经历多步转换才能正常使用，就通过多个 Loader 去转换。在调用多个 Loader 去转换一个文件时，每个 Loader 会链式的顺序执行，第一个 Loader 将会拿到需处理的原内容，上一个 Loader 处理后的结果会传给下一个接着处理，最后的 Loader 将处理后的最终结果返回给 Webpack。

所以，在你开发一个 Loader 时，请保持其职责的单一性，你只需关心输入和输出。

1.3. 常用Loader盘点

1.3.1. babel-loader

• 作用：将 ES6+ 代码转换为 ES5。

• 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

1.3.2. css-loader 和 style-loader

• 作用：css-loader 解析 CSS 文件，style-loader 将 CSS 插入到 DOM 中。

• 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

1.3.3. sass-loader

• 作用：将 SCSS 文件转换为 CSS。

• 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

1.3.4. file-loader

• 作用：处理文件（如图片、字体），并返回其 URL。

• 配置：

module.exports = {
  module: {
    rules: [
      {