How can I see which webpack loaders are used for which files?

Question

Is there a way to make webpack display the exact loader used for each module?

I want to verify that babel-loader is being used for certain modules. How can I validate that my module.rules[].test regular expressions are working as I intend?

The --verbose option does not display loader info.

Answer 1

First, run webpack with --profile and --json options and write the output to local disk.

webpack --profile --json > stat.json

Second, open the stat.json file. Search the filename you are interested in. I'll use a scss file for example, following is what I found in stat.json:

    {
      "id": 1,
      "identifier": "D:\\tmp\\webpack-es6-sass-setup\\node_modules\\extract-text-webpack-plugin\\dist\\loade r.js??ref--1-0!D:\\tmp\\webpack-es6-sass-setup\\node_modules\\style-loader\\index.js!D:\\tmp\\webpack-es6-sass-s etup\\node_modules\\css-loader\\index.js!D:\\tmp\\webpack-es6-sass-setup\\node_modules\\postcss-loader\\lib\\ind ex.js!D:\\tmp\\webpack-es6-sass-setup\\node_modules\\sass-loader\\lib\\loader.js!D:\\tmp\\webpack-es6-sass-setup \\src\\main.scss",
      "name": "./src/main.scss",
      "index": 1,
      "index2": 4,
      "size": 41,
      "cacheable": true,
      "built": true,
      "optional": false,
      "prefetched": false,
      "chunks": [
        0
      ],
      "assets": [],
      "issuer": "D:\\tmp\\webpack-es6-sass-setup\\node_modules\\babel-loader\\lib\\index.js!D:\\tmp\\webpack -es6-sass-setup\\src\\main.js",
      "issuerId": 0,
      "issuerName": "./src/main.js",
      "profile": {
        "factory": 11,
        "building": 38
      },
      "failed": false,
      "errors": 0,
      "warnings": 0,
      "reasons": [
        {
          "moduleId": 0,
          "moduleIdentifier": "D:\\tmp\\webpack-es6-sass-setup\\node_modules\\babel-loader\\lib\\index.js!D: \\tmp\\webpack-es6-sass-setup\\src\\main.js",
          "module": "./src/main.js",
          "moduleName": "./src/main.js",
          "type": "cjs require",
          "userRequest": "./main.scss",
          "loc": "3:0-22"
        }
      ],
      "usedExports": true,
      "providedExports": null,
      "optimizationBailout": [],
      "depth": 1,
      "source": "// removed by extract-text-webpack-plugin"
    }

Note the identifier field. Split it by !, we got:

D:\\tmp\\webpack-es6-sass-setup\\node_modules\\extract-text-webpack-plugin\\dist\\loade r.js??ref--1-0
D:\\tmp\\webpack-es6-sass-setup\\node_modules\\style-loader\\index.js
D:\\tmp\\webpack-es6-sass-s etup\\node_modules\\css-loader\\index.js
D:\\tmp\\webpack-es6-sass-setup\\node_modules\\postcss-loader\\lib\\ind ex.js
D:\\tmp\\webpack-es6-sass-setup\\node_modules\\sass-loader\\lib\\loader.js
D:\\tmp\\webpack-es6-sass-setup \\src\\main.scss

and this is all the loaders webpack used to bundle this file.