Webpack 加载器顺序：什么是 webpack 前加载器和后加载器以及它们与加载器链的区别

Question

我知道在最新的 Webpack 中，我们可以指定 module.rules 选项 enforce: 'pre' 以使某个加载器作为 the docs 中指定的“预加载器”运行。

但我找不到任何正确解释预加载器和后加载器的含义。当然，我们可以逻辑地认为“pre”在“post”之前运行，但我不知道究竟发生了什么（为什么没有记录？）。

这也是考虑到已经有一种方法可以指定加载程序的顺序，查看the docs 中的Rule.use 属性，上面写着Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured)

所以两个相关的问题：

• chaining 和 pre 和 post 有什么区别？
• 有没有办法在这个链的序列上拥有更详细的 webpack 日志，以了解什么先运行，什么第二运行？

PS 1：我知道关于 SO 有类似的问题，但我发现没有一个链接到一个文档，该文档实际上详细解释了加载顺序

PS 2：关于为什么这对我来说很重要的一个简短场景是我运行 typescript、tslint 和 babel，我想了解正确的链接过程以及各个步骤中实际发生的情况

Answer 1

为了找到答案，我编写了自己的加载器a-loader.js 到h-loader.js，它们接收内容、打印日志，然后返回内容。为了完整起见，每个加载程序文件都有一个正常阶段和一个投球阶段。您可以在https://webpack.js.org/api/loaders/#pitching-loader 阅读有关俯仰装载机的信息。

a-loader.js:

module.exports = function(content) {
  console.log('Loader A, normal phase.');
  return content;
};

module.exports.pitch = function(remainingRequest, precedingRequest, data) {
  console.log('Loader A, pitching phase.');
}

除了我将日志语句更改为记录它是哪个加载器之外，所有加载器都有相同的代码。

我的webpack-config.js 看起来像这样：

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/a-loader.js')}],
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/b-loader.js')}]
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/c-loader.js')}]
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/d-loader.js')}]
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/e-loader.js')}],
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/f-loader.js')}]
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/g-loader.js')}]
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/h-loader.js')}]
      },
    ]
  }

输出：

Loader A, pitching phase.
Loader B, pitching phase.
Loader C, pitching phase.
Loader D, pitching phase.
Loader E, pitching phase.
Loader F, pitching phase.
Loader G, pitching phase.
Loader H, pitching phase.
Loader H, normal phase.
Loader G, normal phase.
Loader F, normal phase.
Loader E, normal phase.
Loader D, normal phase.
Loader C, normal phase.
Loader B, normal phase.
Loader A, normal phase.

这并不奇怪。投球阶段首先运行，然后正常阶段运行。正如您所指出的，正相加载器从右到左应用。 h 位于正常阶段的第一位，因为它位于阵列（链）中最右侧。我有一个有用的方法来记住投球顺序。想想正常的相位顺序，想象一下投影在正常顺序之上的镜像。镜像就是投球顺序。

接下来，我将webpack.config.js 调整为如下：

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/a-loader.js')}],
        enforce: "pre"
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/b-loader.js')}]
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/c-loader.js')}]
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/d-loader.js')}],
        enforce: "post"
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/e-loader.js')}],
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/f-loader.js')}],
        enforce: "post"
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/g-loader.js')}]
      },
      {
        test: /\.js$/,
        use: [{loader: path.resolve('loaders/h-loader.js')}],
        enforce: "pre"
      },
    ]
  }

输出：

Loader D, pitching phase.
Loader F, pitching phase.
Loader B, pitching phase.
Loader C, pitching phase.
Loader E, pitching phase.
Loader G, pitching phase.
Loader A, pitching phase.
Loader H, pitching phase.
Loader H, normal phase.
Loader A, normal phase.
Loader G, normal phase.
Loader E, normal phase.
Loader C, normal phase.
Loader B, normal phase.
Loader F, normal phase.
Loader D, normal phase.

暂时忽略投球阶段，因为记住它们只是正常阶段的镜像。想想enforce: pre 和post 之类的分组。 “pre”是第一组，然后是未标记的“normal”组，最后是“post”组。在正常阶段，第一个加载程序是h，因为它在“pre”组中并且在数组中最右边。接下来是a，因为它是“pre”组中唯一的另一个。接下来是从右到左的“未分组”g、e、c、b。最后，“post”组f 和d 按从右到左的顺序运行。

我不知道为什么 webpack 网站上没有更好地记录这一点。