webpack-merge无法访问公共配置变量？如何正确访问及使用？

你遇到的问题核心是对webpack-merge的工作逻辑理解有偏差：它的作用是合并多个配置文件导出的最终配置对象，而不是让不同配置模块共享内部的局部变量。webpack.common.js里的path是该模块的局部变量，webpack.prod.js作为独立的Node.js模块，不会自动继承这些变量，所以才会抛出ReferenceError: path is not defined。

解决方法一：在prod配置中单独引入path模块 #

每个webpack配置文件都是独立的Node.js模块，需要自己引入所需的依赖。你只需要在webpack.prod.js的顶部添加path模块的引入即可：

const path = require('path'); // 新增这一行
const merge = require('webpack-merge'); 
const common = require('./webpack.common.js'); 

module.exports = merge(common, { 
  mode: 'production', 
  devtool: 'source-map', 
  module: { 
    rules: [ 
      { 
        test: /\.(png|svg|jpg|gif)$/, 
        use: [ 'file-loader' ], 
        exclude: [ path.resolve(__dirname, "node_modules") ] 
      } 
    ] 
  } 
});

解决方法二：抽离公共工具模块（优化方案） #

如果多个配置文件都需要用到path或其他公共工具，可以创建一个单独的工具模块来统一管理，避免重复引入：

1. 创建webpack.utils.js：

const path = require('path');

module.exports = {
  path,
  // 可以添加其他公共工具，比如统一的项目根路径
  rootDir: path.resolve(__dirname)
};

2. 在webpack.common.js和webpack.prod.js中引入这个工具模块：

// webpack.common.js
const { path, rootDir } = require('./webpack.utils.js');
// ... 其他配置代码

// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const { path } = require('./webpack.utils.js');

// ... 你的配置代码

再明确下webpack-merge的核心作用 #

它的本质是把多个配置对象的属性进行深度合并：比如common里的entry、output，和prod里的mode、devtool会合并成最终的配置对象。但模块内部的局部变量（比如你在common里定义的path、自定义变量）并不会被共享，每个模块需要自己管理依赖和变量。

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