如何查看哪些webpack加载器用于哪些文件？

Question

有没有办法让webpack显示每个模块使用的确切加载器？

我想验证babel-loader是否正在用于某些模块.如何验证我的module.rules[].test正则表达式是否按照我的意图运行？

该--verbose选项不显示加载程序信息.

Answer 1

首先，使用--profile和--json选项运行webpack 并将输出写入本地磁盘。

webpack --profile --json > stat.json

其次，打开stat.json文件。搜索您感兴趣的文件名。例如，我将使用一个scss文件，这是在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"
    }

注意该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

这就是用于捆绑此文件的所有加载程序Webpack。