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

ztyzrc3y 于 2023-06-23 发布在 Webpack

关注(0)|答案(2)|浏览(203)

我已经阅读了我的“公共”目录在哪里？文件。
公共目录通常是服务器的根目录（即./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 dev服务器并访问我的应用程序时，这两种方法都有效。我得到了正确的嘲笑回应。
在./src/目录中生成mockServiceWorker.js文件：

⚡  npx msw init ./src

用以下内容覆盖package.json

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

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

⚡  npx msw init ./dist

但是，./dist/目录在.gitignore文件中，它不会提交到Git。
webpack-dev-server在编译后不会写入任何输出文件。相反，它将包文件保存在内存中。这意味着在msw CLI生成./dist目录之前，不存在真实的的./dist目录。此外，./dist文件可以在将来删除以重新编译。
那么，当像这样使用webpack-dev-server时，MSW初始化的公共目录应该是什么？

webpack

来源：https://stackoverflow.com/questions/68890067/what-should-be-the-public-directory-for-msw-initialization-when-using-webpack-de

2条答案

按热度按时间

osh3o9ms1#

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

赞(0）回复(0）举报 2023-06-23

xmakbtuz2#

我知道现在有点晚了，但我会给予需要帮助的人答案：
在devServer配置中，您已经将dist目录作为公用文件夹。这是不正确的。dist是我们的构建路径，只存在于生产环境中，所以devServer与它无关。默认的公共目录是<root>/public。
所以你有两种方法：
1-移动你的index.html到public文件夹并删除devServer的配置（或更改配置以使用public作为静态文件夹）.现在你可以安全地运行``npx msw init public`了。
2-将静态文件夹更改为根目录。

devServer: {
  static: [
    path.resolve(process.cwd())
  ]
}

现在，您可以运行npx msw init .以使worker位于根目录上。
我建议使用第一个选项，因为它更干净，更易于维护。

赞(0）回复(0）举报 2023-06-23

我来回答

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

2条答案

相关问题

热门标签

最新问答