使用react实现md转html过程中的问题解决记录

1.cra搭建的react应用中 import xxx.md 文件时无法正确导入内容

原因： webpack默认配置不包含解析md格式文件

在JavaScript中，导入一个文件时，默认情况下会将其解析为一个模块，而不是文件的内容。所以你需要使用适当的方法来获取文件的内容。 如果你使用的是webpack等打包工具，可以使用raw-loader等加载器来加载md文件的内容。

解决方案：修改webpack配置

• 如何扩展 Create React App 的 Webpack 配置 ，这篇文章提供了四种方法
• 使用create-react-app创建的React应用，它默认隐藏了webpack配置文件，这是为了让开发者专注于开发而不是配置。但是，如果你需要修改webpack配置，有几种方法可以实现。

  方法一： 使用react-app-rewired和customize-cra库

  react-app-rewired是一个可以修改create-react-app配置的库，而customize-cra是一个可以修改webpack配置的库。你可以使用这两个库来修改create-react-app的webpack配置。

  1.安装

  npm install react-app-rewired customize-cra --save-dev

  2.创建config-overrides.js文件

  然后，在项目根目录下创建一个config-overrides.js文件，这个文件会被react-app-rewired自动加载，并且可以修改create-react-app的webpack配置。示例代码如下：

  const { override, addWebpackModuleRule } = require('customize-cra');
  
  module.exports = override(
    addWebpackModuleRule({
      test: /\.md$/,
      use: 'raw-loader',
    })
  );
  

  3.在package.json文件中修改scripts字段

  {
    "scripts": {
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "react-app-rewired test"
    }
  }