Webpack加载程序订购: what are webpack pre and post loaders and how they differ from a chain of loaders

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"
      },
    ]
  }

Ouput:

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网站上没有对此进行更好的记录。