使用 webpack-dev-server 时 msw 初始化的公共目录应该是什么？答案

【问题标题】：What should be the public directory for msw initialization when using webpack-dev-server?使用 webpack-dev-server 时 msw 初始化的公共目录应该是什么？
【发布时间】：2021-10-23 15:42:30
【问题描述】：

我已经阅读了Where is my "public" directory? 文档。

公共目录通常是服务器的根目录（即 ./build、./public 或 ./dist）。该目录通常提交给 Git，Mock Service Worker 也应该如此。

当我们使用 webpack 将源代码编译到 output.path: './dist' 目录时，我认为我们不应该将 ./dist 提交给 Git。这让我很困惑。我尝试在浏览器环境中集成MSW。

webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  mode: "development",
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

src/index.js:

window.onload = function () {
  console.log(process.env.NODE_ENV);
  if (process.env.NODE_ENV === "development") {
    const { worker } = require("./mocks/browser");
    worker.start();
  }

  fetch("https://jsonplaceholder.typicode.com/users/1")
    .then((res) => res.json())
    .then((res) => {
      console.log(res);
    });
};

src/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>

src/mocks/browser.js:

import { setupWorker } from "msw";
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);

src/mocks/handlers.js:

import { rest } from "msw";

export const handlers = [
  rest.get("https://jsonplaceholder.typicode.com/users/1", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ username: "teresa teng" }));
  }),
];

我尝试了以下两种方法，当我使用npx webpack serve 命令启动 webpack 开发服务器并访问我的应用程序时，它们都可以工作。我得到了正确的模拟响应。

在./src/目录下生成mockServiceWorker.js文件：

⚡  npx msw init ./src

用以下内容覆盖package.json

"msw": {
  "workerDirectory": "src"
}

在./dist/目录中生成./dist目录和mockServiceWorker.js文件。

⚡  npx msw init ./dist

但是，.gitignore 文件中的./dist/ 目录，不会提交到 Git。

webpack-dev-server 编译后不写入任何输出文件。相反，它将捆绑文件保存在内存中。这意味着在msw CLI 生成它之前没有真正的./dist 目录。另外，./dist文件将来可以删除重新编译。

那么，像这样使用webpack-dev-server时，MSW初始化的公共目录应该是什么？

【问题讨论】：

标签： webpack webpack-dev-server msw

【解决方案1】：

使用自定义服务器设置（如 WDS）时，通常可以选择告诉服务器使用哪个本地目录来提供静态资产。

对于 WDS，它是 devServer.static.directory 选项。它应该指向您创建的本地目录，作为您网站的公共目录。

$ mkdir public
$ msw init ./public

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

module.exports = {
  devServer: {
    static: {
      // Point to the directory you've created.
      directory: path.resolve(__dirname, 'public')
    },
    port: 9000
  }
}

您还可以指向您决定放置工作脚本的任何其他现有目录。

通过导航到 http://localhost:9000/mockServiceWorker.js 并查看脚本文件的内容来验证工作脚本是否正确提供。

【讨论】：