使用webpack 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

我也有同样的问题。我直接使用了导入，它起作用了。在导入之后，我得到了适当的降价。Fetch只是请求一个不存在的文件，在dev模式中默认为index.html。

import GettingStartedMD from "./GettingStartedMD.md";

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