Webpack中的Loader执行顺序：揭开谜团

2023-10-26 17:25:40

Loader执行顺序之谜：解开Webpack配置的隐藏秘密

Webpack是一个强大的工具，它允许我们以模块化的方式构建复杂的JavaScript应用程序。Loader在Webpack中扮演着至关重要的角色，它们将文件从一种格式转换为另一种格式，使我们能够使用各种语言和技术。但是，在配置Webpack时，了解loader的执行顺序至关重要，因为这会影响最终的构建结果。

Loader的执行顺序

乍一看，loader的执行顺序似乎与他们在webpack配置中的顺序相同。但是，情况并非总是如此。Loader的实际执行顺序由以下因素决定：

loader类型： loader分为四种类型：pre、normal、post和inline。pre和post loader分别在normal loader之前和之后运行，而inline loader则与normal loader并行运行。
在pitching阶段返回的内容： 在pitching阶段，loader可以返回一个字符串、函数或false。如果返回了一个字符串或函数，则将跳过loader的处理。

真实的执行顺序

以下是如何确定loader的真实执行顺序：

从右到左遍历normal loader列表： loader将按照它们在配置中列出的顺序从右到左执行。
添加pre loader： 在执行normal loader之前，将添加pre loader。
添加post loader： 在执行normal loader之后，将添加post loader。
执行inline loader： inline loader与normal loader并行执行。
处理pitching阶段返回的内容： 如果loader在pitching阶段返回了一个字符串或函数，则将跳过loader的处理。

实例

让我们考虑以下Webpack配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          "style-loader", // Inline loader
          "css-loader", // Normal loader
          {
            loader: "sass-loader", // Normal loader
            options: {
              implementation: require("sass"),
            },
          },
          "postcss-loader", // Post loader
        ],
      },
    ],
  },
};