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

Posted 2023-02-21

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

【英文标题】：How copy down mockServiceWorker.js file in React application during Webpack build proces to my build folder

【发布时间】：2021-12-31 07:17:55

【问题描述】：

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

我想拦截 GraphQL 请求并模拟它的响应，以便使用赛普拉斯创建 end 2 end 测试。

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

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

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

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

【参考方案1】：

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

$ 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 将工作脚本从一个位置显式复制到另一个位置。但是，我很确定上面的开发服务器建议就是您所寻求的。