Webpack async loader priority order

Question

I wanna replace some code from each typescrpit during webpack compilation. Now I have got something like this:

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

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

And my test-loader looks like this:

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

  source = myReplaceFunction(source)

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

According to this question my loader (test-loader) should be called for each typescript file (and it is). Next loader (@ngtools/webpack) should be operating on modified (by test-loader) typescript files, but isn't, why is that ?

My configuration:

webpack v3.10.0
typescript 2.6.2
node v9.4.0
@ngtools/webpack v1.10.0-beta.3 (same situation for 1.6.4)

Without enforce: 'pre' same effect. I am trying to do something like this, but simpler.

score 0 · Answer 1 · answered Dec 15 '18 at 23:12

If you inspect the source for @ngtools/webpack (node_modules/@ngtools/webpack/src/loader.js), you will notice that the loader does not take any input from the previous loader. Instead it grabs the filename const sourceFileName = this.resourcePath; which is your source Typescript file and converts it to Javascript. Therefore Angular completely ignores any pre-loaders you inject and grabs directly from source.

Hope it helps

Webpack async loader priority order

1 Answers1