揭秘Webpack Loader执行顺序的真相

2023-02-25 01:00:17

Webpack Loader 执行顺序：颠覆你的认知

Webpack loader 是一个强大的工具，可让你在构建过程中对代码进行各种处理，如转换、压缩和加密。在理解如何使用 loader 之前，了解它们的执行顺序至关重要。让我们深入探讨这个迷思，揭开真相。

从右到左的迷思

人们普遍认为 loader 是从右到左执行的，即 webpack.config.js 中 loader 列表中靠后的 loader 会先执行。然而，事实并非总是如此。Webpack 根据特定的规则和例外情况确定执行顺序。

打破迷思的例子

考虑以下例子：

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

在这个例子中，babel-loader 会在 eslint-loader 之前执行，因为 babel-loader 在配置中指定了 options.presets 选项，而 eslint-loader 没有。Webpack 在加载 loader 时，会优先加载已配置 options 选项的 loader。

另一个例子：

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

这里，style-loader 会在 css-loader 和 less-loader 之后执行。这是因为 style-loader 负责将 CSS 代码插入 HTML 中，而 Webpack 会将它放在其他 loader 的后面执行。

其他影响因素

除了上述规则外，还有其他因素也会影响 loader 的执行顺序，包括：