时间戳

首页 > 解决方案 > 使用 webpack-dev-server 时 msw 初始化的公共目录应该是什么？

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

问题描述

我已经阅读了我的“公共”目录在哪里？文档。

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

./dist当我们使用 webpack 将源代码编译到output.path: './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 开发服务器并访问我的应用程序时，它们都可以工作。我得到了正确的嘲笑回应。

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

⚡  npx msw init ./src

package.json用以下内容覆盖

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

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

⚡  npx msw init ./dist

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

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

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

标签： webpackwebpack-dev-servermsw

解决方案

当使用自定义服务器设置（如 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通过导航并查看脚本文件的内容来验证工作脚本是否正确提供。

推荐阅读