非CRA React项目如何通过Webpack拷贝mockServiceWorker.js到构建目录

解决npm start后mockServiceWorker.js丢失问题 #

你遇到的文件丢失问题是因为build是webpack的构建输出目录，每次执行npm start触发编译时，webpack都会默认清空该目录后重新生成产物，手动执行npx msw init build生成的文件自然会被清除。你只需要调整MSW的初始化位置，配合webpack的静态资源拷贝逻辑即可解决：

• 第一步：将MSW的worker文件生成到项目的静态资源源目录（通常为存放图片、字体的public目录，该目录不会被编译流程清空）：

  npx msw init public --save
  

• 第二步：配置copy-webpack-plugin将静态资源统一拷贝到构建目录。如果项目还没有安装该插件先执行安装：

  npm install copy-webpack-plugin --save-dev
  

  然后在webpack.config.js中添加插件配置：

  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  module.exports = {
    // 其余webpack配置保持不变
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          // 原有静态资源拷贝规则保留，新增以下规则将public目录下所有文件拷贝到构建输出根目录
          { from: 'public', to: './' }
        ]
      })
    ]
  }
  

配置完成后，无论开发环境启动还是生产构建，webpack都会自动将mockServiceWorker.js和其他静态资源一起拷贝到build目录，不会再出现文件丢失的问题。

验收环境流水线集成MSW运行Cypress测试 #

按以下步骤配置流水线即可：

• 首先在项目的MSW初始化逻辑中添加环境变量判断，只在测试环境启用MSW，避免影响生产环境：

  // 项目入口文件示例
  if (process.env.REACT_APP_ENABLE_MSW === 'true') {
    const { worker } = require('./mocks/browser');
    worker.start({
      onUnhandledRequest: 'bypass' // 跳过未配置模拟的请求，避免不必要的报错
    });
  }
  

• 流水线任务配置按顺序执行以下命令即可：
  1. 安装项目依赖：npm install
  2. 传入启用MSW的环境变量执行构建：REACT_APP_ENABLE_MSW=true npm run build
  3. 启动静态服务托管构建产物：npx serve build -l 3000 &
  4. 运行Cypress端到端测试：npx cypress run
  5. 测试执行完成后关闭静态服务进程即可。

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