如何在 Webpack 构建过程中将 React 应用程序中的 mockServiceWorker.js 文件复制到我的构建文件夹

Question

我尝试为我的 React 项目设置Mock Service Worker。我的项目不使用CRA。

我想拦截 GraphQL 请求并模拟它的响应，以使用 Cypress 创建端到端测试。

如何将文件复制mockServiceWorker.js到我的构建文件夹（使用 Webpack），如其他资产图像和字体等？

我使用了命令npx msw init build --save。然后mockServiceWorker.js已经创建了。

但是一旦我运行npm start并且我的客户端和服务器被编译，文件mockServiceWorker.js就会消失？

此外，我还需要msw在我们的验收环境中的管道中，也在管道中运行赛普拉斯端 2 端测试。

Answer 1

您不一定需要复制工作脚本。在大多数情况下，您使用 MSW 作为开发工具。如果您使用 webpack 来为您的开发包提供服务，您可能会使用webpack-dev-server来为该包提供服务。Webpack Dev Server 支持指向项目中应充当开发服务器公共目录的本地目录的static.directory选项（以前在 webpack 4 中）。contentBase这就是您需要将工作人员初始化为 的地方。

$ npx msw init ./public --save

如果您确实使用 Webpack Dev Server，请确保将其指向正确的公共目录。执行此操作的方法之一是在您的webpack.config.js：

// webpack.config.js
const path = require('path')

module.exports = {
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'public')
    }
  }
}

请注意，如果您已经在提供静态资产，则无需添加任何额外的 webpack 配置。只需将工作程序初始化npx msw init到包含静态资产的同一目录即可。

如果您通过其他方式提供 webpack 构建，则可以利用copy-webpack-plugin将工作脚本从一个位置显式复制到另一个位置。但是，我很确定上面的开发服务器建议正是您所寻求的。