在karma.config.js中引入webpack配置文件失败求助

问题分析 #

你遇到的核心问题是：在test/karma.config.js中引入../webpack.development.js后，运行npm run test时出现文件不存在的错误，但移除该引入后Karma能正常启动。结合你使用的版本（webpack 5.75.0、karma 6.4.1、karma-webpack 5.0.0），本质是Webpack配置文件中的相对路径在Karma的执行上下文里解析错误——当从test/目录引入根目录的Webpack配置时，配置文件内部的./webpack.common这类相对路径会被解析为test/webpack.common.js（而非根目录下的文件），进而触发找不到文件的错误，但错误提示被误导为Karma配置文件不存在。

解决方案 #

方案1：将Webpack配置中的路径改为绝对路径 #

修改webpack.development.js，使用path.resolve基于当前文件的目录生成绝对路径，避免上下文解析差异：

const path = require('path');
const { merge } = require('webpack-merge');
// 基于当前文件所在目录定位依赖配置
const commonConfig = require(path.resolve(__dirname, './webpack.common'));
const developmentConfig = require(path.resolve(__dirname, './webpack-config/webpack.development'));
module.exports = merge(commonConfig, developmentConfig, { mode: 'development' });

__dirname指向webpack.development.js所在的根目录，确保无论从哪个位置引入该配置，内部依赖的路径都能正确解析。

方案2：在Karma配置中直接合并Webpack配置 #

绕开外部引入，直接在karma.config.js中合并需要的Webpack配置，避免路径解析问题：

const path = require('path');
const { merge } = require('webpack-merge');

// 直接从根目录加载基础配置和开发配置
const commonConfig = require(path.resolve(__dirname, '../webpack.common'));
const devConfig = require(path.resolve(__dirname, '../webpack-config/webpack.development'));

// 合并出Karma需要的Webpack配置
const webpackConfig = merge(commonConfig, devConfig, { mode: 'development' });

module.exports = function(config) {
  config.set({
    // 其他Karma配置...
    webpack: webpackConfig,
    // 其他Karma配置...
  });
};

方案3：确认测试脚本的执行目录 #

检查package.json中的test脚本，确保它在项目根目录执行Karma：

"scripts": {
  "test": "karma start test/karma.config.js"
}

如果脚本是cd test && karma start这类会切换到test/目录执行的命令，../会指向项目根目录的上级，导致找不到Webpack配置文件，必须保证执行命令的工作目录是项目根。

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