使用 webpacks raw-loader 读取 markdown 文件会导致 index.html 的内容

Question

我正在尝试使用 markdown-to-jsx 在我的 React 应用程序中显示 Markdown 文件，但它一直在呈现 index.html 文件。

在我的 webpack.config 我有：

{
    test: /\.md$/i,
    use: [
      {
        loader: "raw-loader",
        options: {
          esModule: false,
        },
      },
    ],
},

然后在我的 react 组件中，我都尝试了： const GettingStartedMD = require("./userguide.md"); 并import GettingStartedMD from "./userguide.md";

然后在我的组件中，我有：

const DisplayAbout = () => {
  const [markdown, setMarkdown] = useState("");
  const classes = useStyles();

  useEffect(() => {
    fetch(GettingStartedMD)
      .then((res) => res.text())
      .then((text) => setMarkdown(text))
      .catch((err) => console.log(err));
  }, []);
  return (
    <Container className={clsx(classes.root)}>
      {markdown && <Markdown children={markdown} />}
...

但是 fetch 和 .text() 的结果始终是 index.html 文件的内容。

Answer 1

我遇到过同样的问题。 我直接使用了导入并且它起作用了。 导入后我得到了正确的降价。 获取对不存在文件的简单请求，该文件在开发模式下默认为 index.html。

import GettingStartedMD from "./GettingStartedMD.md";

export const MyComponent = () => {
  return (
    <div>{GettingStartedMD}</div>
  )
}