Question

我想在webpack编译期间替换每个typescrpit中的一些代码。现在我有这样的事情：

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);
};

根据this question我应该为每个打字稿文件调用我的加载程序（ test-loader ）（它是）。下一个加载器（ @ ngtools / webpack ）应该在修改后的（通过 test-loader ）打字稿文件上运行，但不是，为什么是< / strong>？

我的配置：

webpack v3.10.0

打字稿 2.6.2

节点 v9.4.0

@ ngtools / webpack v1.10.0-beta.3（1.6.4的相同情况）

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

Answer 1

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

希望有帮助

Webpack异步加载器优先级顺序

1 个答案: