Monorepo中使用共享Webpack配置构建时dist生成路径异常

问题根源在于共享配置文件中的__dirname指向的是配置文件自身所在的configs/webpack目录，而非调用它的cancel包目录，导致Webpack输出路径错误。以下是两种无冗余的解决方案：

方案一：让共享配置接收调用方目录参数（推荐） #

通过将共享配置封装为函数，接收调用方的项目根目录作为参数，动态生成路径：

1. 修改共享配置文件（如configs/webpack/base.config.js）：

const path = require('path');

// 导出函数，接收调用方的项目根目录
module.exports = (projectRoot) => ({
  // 其他Webpack配置...
  output: {
    // 基于调用方目录生成dist路径
    path: path.resolve(projectRoot, 'dist'),
    filename: '[name].[contenthash].js'
  },
  // 其他涉及路径的配置也用projectRoot生成，比如entry、alias
  entry: path.resolve(projectRoot, 'src/index.js'),
  resolve: {
    alias: {
      '@': path.resolve(projectRoot, 'src')
    }
  }
});

2. 在packages/cancel/webpack.config.js中调用该函数并传入自身目录：

const path = require('path');
const getBaseWebpackConfig = require('../../configs/webpack/base.config');

// 当前cancel包的根目录
const projectRoot = path.resolve(__dirname);
module.exports = getBaseWebpackConfig(projectRoot);

方案二：利用Webpack执行时的工作目录 #

如果确保执行构建命令时始终在目标包目录（或通过Yarn Workspace自动切换目录），可以直接在共享配置中使用process.cwd()获取当前工作目录：

修改共享配置的输出路径：

const path = require('path');

module.exports = {
  // 其他Webpack配置...
  output: {
    // process.cwd()会指向执行build命令的目录
    path: path.resolve(process.cwd(), 'dist'),
    filename: '[name].[contenthash].js'
  }
};

注意：如果直接在Monorepo根目录执行webpack --config packages/cancel/webpack.config.js，process.cwd()会是根目录，导致输出路径错误。这种情况下优先使用方案一。

关键注意事项 #

• 所有涉及文件路径的配置（entry、output、resolve.alias等）都要避免依赖共享配置的__dirname，统一基于调用方目录或当前工作目录生成。
• 使用Node.js的path.resolve()或path.join()处理路径，保证跨平台兼容性。

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