适配react-markdown的Webpack .md文件导入Loader求助

其实你不需要专门找适配react-markdown的Webpack Loader——因为react-markdown的核心需求只是原始的Markdown文本内容，只要让Webpack能正确读取.md文件并返回字符串给组件就行，下面给你两种最简单的可行方案：

方案1：Webpack 5+（推荐，无需额外安装依赖） #

Webpack 5自带了asset/source模块类型，可以直接将文件内容作为字符串导入，不需要额外装loader：

步骤1：修改Webpack配置 #

在你的webpack.config.js中添加如下规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...已有的loader规则
      {
        test: /\.md$/,
        type: 'asset/source' // 直接将.md文件内容转为字符串
      }
    ]
  }
};

步骤2：简化组件代码 #

现在可以直接导入.md文件的内容，不需要用fetch请求（fetch是用来请求远程资源的，本地文件用loader导入更高效）：

/* eslint-disable react/prefer-stateless-function */
import React, { Component } from 'react';
import ReactMarkdown from 'react-markdown';
import markdownContent from './posts/sample.md'; // 直接导入文本内容

class CardDetails extends Component {
  render() {
    return <ReactMarkdown source={markdownContent} />;
  }
}

export default CardDetails;

方案2：Webpack 4及以下（需要安装raw-loader） #

如果你的项目还在使用Webpack 4，需要安装raw-loader来读取文件内容：

步骤1：安装依赖 #

npm install raw-loader --save-dev

步骤2：修改Webpack配置 #

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...已有的loader规则
      {
        test: /\.md$/,
        use: 'raw-loader'
      }
    ]
  }
};

步骤3：组件代码修改和方案1一致 #

直接导入.md文件内容，去掉fetch逻辑即可。

为什么之前会报错？ #

Webpack默认不知道如何处理.md文件类型，所以会抛出“无法解析”的错误。你不需要用markdown-loader（它是把Markdown转成HTML字符串，适配的是marked这类直接渲染HTML的库），而react-markdown需要的是原始Markdown文本来自己解析渲染，所以只要让Webpack把.md文件当成纯文本导入就够了。

内容的提问来源于stack exchange，提问作者0xAnon