使用webpacks原始加载程序读取markdown文件会导致index.html的内容

Question

我正试图使用markdown到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只是请求一个不存在的文件，该文件在开发模式下默认为index.html。

import GettingStartedMD from "./GettingStartedMD.md";
export const MyComponent = () => {
return (
<div>{GettingStartedMD}</div>
)
}