Webpack加载器顺序:什么是Webpack前、后加载器,与链式加载器有什么不同?

问题描述 投票:6回答:1

我知道,在最新的Webpack中,我们可以指定 module.rules 选择权 enforce: 'pre' 中指定的 "预加载器",使某个加载器作为 "预加载器 "运行。文献.

但我找不到任何关于pre-loader和post-loader的适当解释。当然,从逻辑上讲,我们可以认为 "pre "运行在 "post "之前,但我不明白到底发生了什么(为什么没有记录在案?

这也是考虑到已经有一种方法可以通过查看属性来指定加载器的顺序。Rule.use文献 其中说 Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured)

所以有两个相关的问题。

  • 链条和前、后的区别是什么?
  • 有没有一种方法可以让webpack日志更详细地记录这个链的顺序,以了解什么是先运行什么是后运行?

PS 1: 我知道在SO上也有类似的问题,但是我没有找到任何一个链接到一个文档,这个文档实际上是对加载顺序进行了详细的解释。

PS 2:关于为什么这对我来说很重要的一个简单的场景是,我运行typecript、tslint和babel,我想了解正确的链锁过程,以及在各个步骤中到底发生了什么。

webpack webpack-2
1个回答
4
投票

为了找到答案,我写了自己的加载器。a-loader.js 通过 h-loader.js 采集内容,打印日志,然后返回内容。每个加载器文件都有一个正常阶段和一个完整的投掷阶段。你可以在这里阅读关于投掷加载器的内容 https:/webpack.js.orgapiloaders#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: prepost 样的分组。 "前 "是第一组,来的是未贴标的,最后是 "后 "组。 在正常阶段,第一个装载机是 h 因为它在 "pre "组中,并且是数组中最右边的。接下来是 a 因为它是 "预 "组中唯一的一个。 接下来是 "未分组" g, e, c, b 从右到左。 最后是 "岗位 "组。fd,按照从右到左的顺序运行。

我不知道为什么在webpack网站上没有更好的记录。

© www.soinside.com 2019 - 2024. All rights reserved.