webpack loader

Webpack 的 loader 是按照相反的顺序执行的。具体来说，Webpack 会从配置中 use 数组的最后一个 loader 开始，依次向前执行。这意味着第一个 loader 会最后执行，而最后一个 loader 会最先执行。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'loader1',
          'loader2',
          'loader3'
        ]
      }
    ]
  }
};

在这个配置中，loader3 会最先执行，接着是 loader2，最后是 loader1。执行顺序如下：

1. loader3
2. loader2
3. loader1

为什么是相反的顺序？

这是因为 Webpack 的 loader 设计为链式调用，每个 loader 接受上一个 loader 的输出作为输入。最后一个 loader 处理原始资源文件，接着每个 loader 依次处理前一个 loader 的输出，直到第一个 loader。

Webpack 的 loader 之所以按照相反的顺序执行，是为了实现一种链式处理的机制，每个 loader 接受上一个 loader 的输出作为输入。这种设计模式在处理资源转换时非常有效，确保每个 loader 都能专注于特定的转换任务，而不需要关心整个转换过程。

详细解释

1. 链式处理：

   • Webpack 的 loader 设计为链式调用，每个 loader 接受上一个 loader 的输出作为输入。
   • 最后一个 loader 处理原始资源文件，接着每个 loader 依次处理前一个 loader 的输出，直到第一个 loader。

2. 职责分离：

   • 每个 loader 专注于一个特定的转换任务。例如，一个 loader 可能负责将 TypeScript 转换为 JavaScript，另一个 loader 可能负责将 ES6 代码转换为 ES5。
   • 这种职责分离使得 loader 更加模块化和可重用。

3. 灵活性：

   • 通过反向执行顺序，开发者可以灵活地组合 loader，以满足不同的需求。

   • 例如，你可以先使用一个 loader 将代码转换为某种中间格式，然后再使用另一个 loader 进一步处理这个中间格式。

   • 假设你有以下三个 loader：

   • babel-loader：将 ES6+ 代码转换为 ES5。

   • ts-loader：将 TypeScript 转换为 JavaScript。

   • eslint-loader：检查代码质量。

   • 如果你希望先检查 TypeScript 代码质量，然后将 TypeScript 转换为 JavaScript，最后将 ES6+ 代码转换为 ES5，你的配置可能如下：

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

在这个配置中，执行顺序如下：

1. eslint-loader：首先检查 TypeScript 代码质量。
2. ts-loader：将 TypeScript 转换为 JavaScript。
3. babel-loader：将 ES6+ 代码转换为 ES5。

webpack的 loader 配置的几种方式

1. 字符串方式

这是最简单的方式，直接使用 loader 的名称

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

2. 对象方式

这种方式允许你配置 loader 的选项。

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

3. 数组方式

当你需要使用多个 loader 时，可以使用数组。数组中的 loader 会按照相反的顺序执行。

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

4. 混合方式

你可以混合使用字符串和对象方式。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          {
            loader: 'eslint-loader',
            options: {
              // eslint options
            }
          }
        ]
      }
    ]
  }
};

5. 函数方式

你可以使用函数来动态配置 loader。这在需要根据环境变量或其他条件动态配置 loader 时非常有用。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: (resource) => {
          if (resource.includes('special')) {
            return 'special-loader';
          }
          return 'babel-loader';
        }
      }
    ]
  }
};

6. 使用 oneOf 关键字

oneOf 关键字允许你为同一个文件类型定义多个匹配规则，但只会应用第一个匹配的规则。这在你需要为同一文件类型定义不同的处理方式时非常有用。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        oneOf: [
          {
            resourceQuery: /special/,
            use: 'special-loader'
          },
          {
            use: 'babel-loader'
          }
        ]
      }
    ]
  }
};

在 Webpack 中，loader 的本质是一个函数，它接收源文件内容作为输入，并返回转换后的内容。loader 可以同步或异步地执行，并且可以通过链式调用来处理文件。

Loader 的本质

• 输入：源文件内容。
• 输出：转换后的内容。
• 功能：将一种文件类型转换为另一种文件类型，或者对文件内容进行处理。

手写一个简单的 Loader

首先，创建一个自定义 loader 文件，例如 uppercase-loader.js

module.exports = function(source) {
  // source 是文件的内容
  const result = source.toUpperCase();
  return result;
};

2. 配置 Webpack 使用自定义 Loader

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.txt$/, // 处理 .txt 文件
        use: path.resolve(__dirname, 'loaders/uppercase-loader.js')
      }
    ]
  }
};

构建完成后，打开 dist/bundle.js，你会看到 example.txt 文件的内容被转换为大写，

处理异步操作的 Loader

如果你的 loader 需要进行异步操作（例如读取文件或进行网络请求），你可以使用 this.async() 方法来获取一个回调函数，并在异步操作完成后调用它。

以下是一个示例，展示如何编写一个异步 loader：

module.exports = function(source) {
  const callback = this.async();

  // 模拟异步操作，例如读取文件或进行网络请求
  setTimeout(() => {
    const result = source.toUpperCase();
    callback(null, result);
  }, 1000);
};

• Loader 的本质：一个函数，接收源文件内容作为输入，并返回转换后的内容。
• 手写 Loader：创建一个自定义 loader 文件，并在 Webpack 配置中使用它。
• 异步 Loader ：使用 this.async() 方法处理异步操作。