Webpack中__dirname路径带/local前缀异常的原因及解决方法

根本原因 #

• Webpack对Node.js内置变量的模拟处理：Webpack默认不会直接使用Node.js原生的__dirname，而是对其进行模拟替换。如果你的项目目录/home/myname/workplace/projectname是/local/home/myname/workplace/projectname的软链接，Node.js在解析路径时会自动展开软链接为真实物理路径，Webpack打包时会沿用这个解析后的路径，导致输出结果与实际路径不符。
• Webpack配置的node选项干扰：若Webpack配置中设置了node.__dirname: true（常见于Webpack 4及更早版本），Webpack会将__dirname替换为相对于配置中context选项的路径；如果context被解析为软链接的真实路径，也会引发路径异常。

修复方案 #

方案1：强制使用原生__dirname或自定义路径 #

• Webpack 5：
  Webpack 5默认禁用Node.js变量模拟，你可以通过DefinePlugin显式指定__dirname为项目实际路径：

  const path = require('path');
  const webpack = require('webpack');
  
  module.exports = {
    // 其他配置项
    plugins: [
      new webpack.DefinePlugin({
        __dirname: JSON.stringify(path.resolve(__dirname))
      })
    ]
  };
  

  path.resolve(__dirname)会获取Webpack配置文件所在的原始路径（不解析软链接），打包时代码中的__dirname会被替换为该路径。

• Webpack 4：
  修改配置禁用__dirname的模拟，使用Node.js原生值：

  module.exports = {
    // 其他配置项
    node: {
      __dirname: false
    }
  };
  

方案2：禁用软链接解析 #

在Webpack配置中关闭软链接跟随，保持原始路径：

module.exports = {
  // 其他配置项
  resolve: {
    symlinks: false
  }
};

或者启动Webpack时添加参数：

webpack --preserve-symlinks

这两种方式都会让Webpack不解析软链接，直接使用项目的原始路径。

方案3：修正Webpack的context配置 #

如果配置中显式设置了context，确保其值为项目实际路径：

const path = require('path');

module.exports = {
  context: path.resolve('/home/myname/workplace/projectname'),
  // 其他配置项
};

以此为基准路径处理相关变量，避免解析为软链接的真实路径。

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