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

Question

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

我想验证 babel-loader正在用于某些模块。如何验证我的 module.rules[].test正则表达式按我的意图工作？
--verbose选项不显示加载程序信息。

Answer 1

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

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 field 。按 ! 拆分它， 我们有:

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。