Webpack技术问询：能否在bundle中显示模块源文件名而非索引？

当然可以！Webpack本身就提供了直接在bundle中保留源文件名、替换模块索引注释的配置，不用依赖外部分析工具，下面是具体的实现方式：

1. 开启output.pathinfo配置 #

这是最简单直接的方案，在你的Webpack配置文件中，给output对象添加pathinfo: true配置项即可。这样Webpack会自动在每个模块的注释前缀里附上该模块的源文件相对路径，替代原来的数字索引。

配置示例：

const path = require('path');

module.exports = {
  // 其他基础配置（entry、module等）
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    pathinfo: true // 关键配置
  }
};

• 模式差异：在**开发模式（mode: 'development'）下，pathinfo默认是开启的；但在生产模式（mode: 'production'）**下默认关闭（因为会增加bundle体积）。如果生产环境有调试需求，可以手动将其设为true，不过一般不推荐在正式生产包中开启。

2. 旧版本Webpack：使用NamedModulesPlugin #

如果你使用的是Webpack 4及更早的版本，还可以通过NamedModulesPlugin插件来强制使用模块名称而非数字索引。不过Webpack 5之后，这个插件的功能已经被整合到pathinfo配置中，直接开启pathinfo就足够了。

配置示例：

const webpack = require('webpack');

module.exports = {
  // 其他配置
  plugins: [
    new webpack.NamedModulesPlugin()
  ]
};

配置完成后，打开生成的bundle文件，你会看到类似/***/ "./src/components/Button.js"的注释，代替原来的/***/ 456这类数字索引，完全可以直接在bundle里查看模块对应的源文件名。

内容的提问来源于stack exchange，提问作者Boris Burkov