Webpack5+Docusaurus如何读取markdown文件原始内容为字符串

规则不生效是两个配置问题导致的：

1. Docusaurus框架内部封装了完整的Webpack构建配置，不会自动读取你在根目录新建的webpack.config.js文件，自定义Webpack规则必须通过框架暴露的配置入口注入。
2. Docusaurus内置了.md/.mdx文件的MDX编译规则，默认对docs目录下的所有markdown文件生效，你自定义的asset/source规则既没有设置优先匹配的优先级，也没有让内置MDX规则跳过带?raw参数的请求，导致文件先被MDX loader编译，最终返回组件函数而非原始字符串。

• 打开项目根目录的docusaurus.config.js配置文件，删除你之前自行创建的独立webpack.config.js文件。
• 在配置中添加configureWebpack字段，修改内置规则并注入自定义raw资源处理规则，参考配置如下：

// docusaurus.config.js
module.exports = {
  // 保留你原有的title、url、baseUrl、presets等所有配置
  // ...
  configureWebpack: (config) => {
    // 让内置MDX编译规则跳过带?raw查询参数的markdown文件
    config.module.rules.forEach(rule => {
      if (rule.test && /mdx?/.test(rule.test.toString())) {
        rule.exclude = /\?raw$/;
      }
    });
    // 注入source asset规则，设置pre优先级提前匹配
    config.module.rules.push({
      resourceQuery: /raw/,
      type: 'asset/source',
      enforce: 'pre'
    });
    return config;
  }
};

• 全量重启Docusaurus开发服务（Webpack配置修改不会触发热更新，必须重启进程），原有导入语句不需要修改：

import template from '@site/docs/template.md?raw';
console.log(template); // 此时输出为原始markdown字符串

如果不想修改框架内置的MDX处理规则，可以直接把需要读取原始内容的markdown模板移出docs目录，比如存放到src/templates/路径下。docs是Docusaurus默认的文档内容目录，目录内的md文件会被自动识别为文档页走MDX编译流程，其他目录下的md文件不会被内置规则默认处理，配合asset/source规则即可直接读取原始内容。

内容的提问来源于stack exchange，提问作者Kevin Patrick