纯JS环境下Cypress配置模块别名导入失败求助

1. 安装必要依赖 #

Cypress不会自动读取根目录独立的webpack.config.js，需要安装对应的Webpack预处理器包来关联配置：

npm install --save-dev @cypress/webpack-preprocessor webpack webpack-cli

2. 修改Cypress核心配置 #

在项目根目录的cypress.config.js中直接配置Webpack选项，替换你之前单独的webpack.config.js：

const { defineConfig } = require('cypress');
const webpack = require('@cypress/webpack-preprocessor');
const path = require('path');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      const webpackOptions = {
        resolve: {
          alias: {
            // 注意：不要加通配符*，直接指向pages目录的绝对路径
            '@pages': path.resolve(__dirname, 'cypress/pages')
          }
        },
        module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: { loader: 'babel-loader' } // 可选，如需JS转译
            }
          ]
        }
      };

      on('file:preprocessor', webpack({ webpackOptions }));
    },
  },
});

3. 配置IDE识别别名 #

在项目根目录创建jsconfig.json，让IDE（如VS Code）正确识别别名路径，避免它去node_modules查找：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@pages/*": ["cypress/pages/*"]
    }
  },
  "include": ["cypress/**/*"]
}

4. 验证导入语法 #

现在可以直接用别名导入页面对象：

import LoginPage from '@pages/loginPage.js';

关键修正点 #

• 原配置中path.resolve里的*是错误的，Webpack别名只需指向目标目录，无需通配符。
• Cypress 10+版本不再默认读取外部的webpack.config.js，必须通过cypress.config.js中的预处理器配置Webpack选项。
• jsconfig.json是解决IDE识别问题的核心，不配置的话Cypress运行可能正常，但IDE会持续报错影响开发体验。

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