webpack无法解析兄弟目录src模块 测试脚本编译失败问题求助

核心问题定位 #

webpack无法解析src目录模块，主要是配置存在多处语法和规则错误：

• resolve.alias通配符配置不符合webpack规范，无法正确映射src、test目录的导入路径
• devtool配置行存在语法错误，导致配置解析异常
• output.path使用了未声明的root、source.outputDir变量，测试打包产物输出路径错误

修正配置（优先解决原问题） #

1. 替换alias为resolve.modules配置 #

不需要使用通配符alias，直接配置搜索目录优先级即可实现裸导入src下的模块，修改webpack.config.js的resolve字段：

resolve: {
  // 导入模块时优先搜索src、test目录，再搜索node_modules，和jsconfig.json规则对齐
  modules: [path.resolve(__dirname, "./src"), path.resolve(__dirname, "./test"), "node_modules"],
  extensions: ['.json', '.js', '.jsx', '.scss', '.sass', '.html', '.htm']
}

2. 修正语法和路径配置 #

• 把错误的devtool行修改为：devtool: 'source-map',
• 调整output配置，确保测试产物输出到mocha能识别的路径：

output: {
  clean: true,
  path: path.resolve(__dirname, "./test/test-dist"),
  filename: "test.js",
}

修改完成后重新执行npm run test即可正常解析src下的模块。

更简化的mocha测试方案 #

不需要通过webpack打包再跑测试，可直接用babel转译执行测试源码，省去打包步骤：

1. 安装额外依赖：
   npm install -D @babel/register babel-plugin-module-resolver
2. 在项目根目录新增.babelrc配置，对齐jsconfig的路径规则：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["module-resolver", {
      "root": ["./src", "./test"]
    }]
  ]
}

3. 修改package.json的test脚本：

"test": "mocha test/**/*.js --require @babel/register --require source-map-support/register --reporter spec --check-leaks --recursive"

调整后直接执行npm run test即可跑测试，无需webpack打包。

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