typescript - Webpack 异步加载器优先顺序

Question

我想在 webpack 编译期间替换每个 typecrpit 中的一些代码。现在我得到了这样的东西：

module: {
        rules: [
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: [
                    {

                        "loader": "test-loader"
                    }
                ]
            },
            {
                test: /\.ts$/,
                loader: [
                    {
                        "loader": "@ngtools/webpack",
                        "options": {
                            "tsConfigPath": "tsconfig.json",
                        }
                    }
                ]
            }
        ]
    },

我的测试加载器看起来像这样：

module.exports = function (source, map) {
  var callback = this.async();

  source = myReplaceFunction(source)

  this.cacheable && this.cacheable();
  callback(null, source, map);
};

根据这个问题，应该为每个打字稿文件调用我的加载器（test-loader ）（确实如此）。下一个加载器（@ngtools/webpack）应该在修改过的（通过test-loader）打字稿文件上运行，但不是，为什么会这样？

我的配置：

• webpack v3.10.0
• 打字稿2.6.2
• 节点v9.4.0
• @ngtools/webpack v1.10.0-beta.3（1.6.4 的情况相同）

没有enforce: 'pre'同样的效果。我正在尝试做这样的事情，但更简单。

Answer 1

如果您检查 @ngtools/webpack ( node_modules/@ngtools/webpack/src/loader.js) 的源代码，您会注意到加载器没有从前一个加载器获取任何输入。相反，它会获取const sourceFileName = this.resourcePath;作为源 Typescript 文件的文件名并将其转换为 Javascript。因此，Angular 完全忽略了您注入的任何预加载器，并直接从源代码中获取。

希望能帮助到你