以创意眼光认识 Webpack Loader 的执行过程

从左往右，从下往上的基本执行规则

在 Webpack 的世界里，loader 的执行顺序遵循着一定的规则，默契地遵循着左往右，从下往上的原则。这意味着，从左往右读取 loader 列表时，loader 会按顺序一个接一个地执行；而对于同一个资源，如果配置了多个 rule，则按照从下往上依次执行，先行配置的 rule 享有优先权。

normal-loader 的特殊执行顺序

细心的你可能会注意到，normal-loader 在规则的执行过程中似乎拥有独特的执行顺序，先执行 normal-loader2 再执行 normal-loader1。这种特殊的情况与 normal-loader 在 Webpack 中担任的角色紧密相关。作为一种对资源进行预处理的 loader，normal-loader 负责将各种资源格式转换为 JavaScript 模块，而这正是模块化构建的基础。

因此，为了确保后续 loader 能够顺利地处理资源，Webpack 规定了 normal-loader 的执行顺序，使其优先于其他 loader 执行。这样，当 normal-loader 执行完毕后，资源就已经被转化成了 JavaScript 模块，为其他 loader 和后续的编译、打包过程做好了准备。

rule 对 loader 执行顺序的影响

rule 是 Webpack 用于配置 loader 的工具。通过 rule，你可以指定要使用的 loader 以及 loader 的执行顺序。值得一提的是，rule 的配置顺序也会对 loader 的执行顺序产生影响。

假设你配置了以下两个 rule：

{
  test: /\.js$/,
  use: [
    'loader1',
    'loader2'
  ]
},
{
  test: /\.css$/,
  use: [
    'loader3',
    'loader4'
  ]
}

在这种情况下，当遇到一个 JavaScript 文件时，loader1 和 loader2 会按照顺序执行。类似地，当遇到一个 CSS 文件时，loader3 和 loader4 会按照顺序执行。但是，如果这两个文件同时存在于你的项目中，它们的处理顺序将取决于 rule 的配置顺序。

loader 执行顺序的真实实践

现在，让我们用一个真实的示例来演示 loader 的执行顺序是如何在实践中工作的。假设你有一个简单的 Webpack 配置，如下所示：

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

当 Webpack 遇到一个 JavaScript 文件时，它会首先检查是否满足 rule 中定义的条件。如果满足，则会按照指定的顺序执行 loader。在我们的示例中，babel-loader 会首先执行，然后才是 eslint-loader。

loader 执行顺序的重要性

理解 loader 的执行顺序对于 Webpack 开发人员来说至关重要。通过合理地配置 loader 的执行顺序，你可以优化 Webpack 的性能，避免不必要的 loader 执行，并确保资源能够被正确地处理和编译。

总结

Webpack Loader 的执行顺序是 Webpack 构建过程中至关重要的一环，影响着资源的处理、模块的编译以及 JavaScript 的执行。通过理解 normal-loader 的特殊执行顺序、rule 的影响以及 loader 执行顺序的实践，你能更深入地掌握 Webpack 的工作原理，并编写出更高效、更优化的代码。