如何移除Webpack生产构建输出文件中的绝对路径？

我懂你遇到的问题——生产构建后输出的文件里混着本地绝对路径，不仅看着别扭，还可能泄露项目结构信息。结合你给出的Webpack配置，给你几个针对性的解决办法：

1. 明确关闭路径信息输出 #

在你的output配置里添加pathinfo: false，虽然Webpack生产模式默认是关闭的，但明确配置能避免因为其他插件或配置意外开启这个选项：

output: { 
  path: buildPath,
  filename: '[name]-[chunkhash].js',
  publicPath: ...,
  pathinfo: false // 关闭路径信息输出
}

2. 阻止Webpack注入真实文件路径 #

如果你的代码里用到了__dirname或__filename，Webpack默认会把它们替换成本地绝对路径。在Webpack配置里添加node配置项，阻止这种替换：

module.exports = {
  // ...其他配置
  node: {
    __dirname: false, // 保留字面量__dirname，不替换为绝对路径
    __filename: false
  }
}

注意：Webpack 5中node配置的写法有调整，但直接设置__dirname: false在新版本中依然有效。

3. 重写Source Map中的路径（如果使用Source Map） #

你配置了生成source-map，默认的source-map可能会包含绝对路径。可以通过devtoolModuleFilenameTemplate来重写这些路径，用相对路径或自定义格式替代：

module.exports = {
  // ...其他配置
  devtool: 'source-map',
  devtoolModuleFilenameTemplate: 'webpack:///[resource-path]' // 替换为相对路径格式
}

4. 检查Babel或其他Loader的配置 #

如果你用了Babel，确保没有开启会保留路径的插件或配置。比如有些Babel插件会在编译时注入文件路径，检查你的.babelrc或Babel配置项，关闭类似的功能。

按照上面的步骤调整后，重新构建应该就能移除那些讨厌的绝对路径了。

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