如何在Cypress 10+中扩展Webpack配置？

1. 先安装必要依赖 #

确保项目里装了适配Cypress 10+版本的Webpack预处理器，以及Webpack核心工具：

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

2. 在cypress.config.js中直接配置 #

不需要单独的旧版插件文件，直接在主配置文件里通过setupNodeEvents钩子扩展Webpack配置，示例代码如下：

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 自定义你的Webpack配置规则
      const customWebpackConfig = {
        resolve: {
          extensions: ['.js', '.jsx', '.ts', '.tsx'] // 按需添加需要解析的文件扩展名
        },
        module: {
          rules: [
            // 举个例子：添加TypeScript解析规则
            {
              test: /\.(ts|tsx)$/,
              loader: 'ts-loader',
              options: { transpileOnly: true }
            }
          ]
        }
      }

      // 将自定义配置传入预处理器并注册
      const preprocessorOptions = {
        webpackOptions: customWebpackConfig
      }
      on('file:preprocessor', webpackPreprocessor(preprocessorOptions))
      
      return config
    },
    // 其他E2E测试相关配置...
  },
  // 如果是组件测试，同样在component字段下配置setupNodeEvents
  component: {
    setupNodeEvents(on, config) {
      // 复用上面的Webpack配置逻辑即可
    },
    // 其他组件测试相关配置...
  }
})

3. 进阶：基于默认配置扩展 #

如果不想完全重写Webpack配置，而是在默认配置上修改，可以先获取默认配置再合并：

const defaultWebpackConfig = webpackPreprocessor.defaultOptions.webpackOptions
const customWebpackConfig = {
  ...defaultWebpackConfig,
  resolve: {
    ...defaultWebpackConfig.resolve,
    extensions: [...defaultWebpackConfig.resolve.extensions, '.ts', '.tsx']
  }
}

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