Webpack：在配置中引用当前正在处理的文件名答案

【问题标题】：Webpack: Refer currently processing file name in configsWebpack：在配置中引用当前正在处理的文件名
【发布时间】：2021-09-15 09:37:18
【问题描述】：

我正在尝试用 webpack 捆绑中的文件名替换字符串。有没有办法让 webpack 配置给我当前处理文件的文件名？这样我就可以将它与webpack-plugin-replace 类似的东西一起使用，

plugins: [
...
    new ReplacePlugin({
      values: {
        '__CUSTOM_STRING': CURRENTLY_PROCESSING_FILENAME,
      }
    })
  ]

注意：__filename 解决方案对我不起作用，因为我使用 angular-cli 直接构建而不是 webpack。在 Angular 组件中引用 __filename 会导致 Cannot find name __filename 错误。

【问题讨论】：

【解决方案1】：

是的，有一个：__filename

但默认情况下 webpack 不会泄漏路径信息，您需要设置一个配置标志来获取真实文件名而不是模拟 ("/index.js")。

// /home/project/webpack.config.js
module.exports = {
  context: __dirname,
  node: {
    __filename: true
  }
}

你可以使用 __filename 获取相对于上下文选项的当前文件名：

// in /home/project/dir/file.js
console.log(__filename);
// => logs "dir/file.js"

文件名仅嵌入到使用__filename 的模块中。因此，您不必担心路径会从其他模块中泄露。

【讨论】：

谢谢！事实上，我尝试了这个解决方案。它可以工作，除了我使用 angular-cli 来构建，而不是直接使用 webpack。当我尝试 __filename 时，Angular 会抛出 cannot find name __filename。我将更新我的问题以包含角度信息。你能帮忙解决这个问题吗？