如何使用 webpack 5 和 docusaurus 将 markdown 文件的原始内容读入字符串

Question

我目前正在重构一个 Docusaurus 应用程序，它显示来自 markdown 文档的开发人员文档。 该应用程序有一个“快速启动”功能，它有一个向导，用户可以填写信息，然后填充 markdown 模板。

该应用程序过去使用 webpack 4 和raw-loader来读取文档模板的内容，然后查找并替换为用户输入的内容。自从我切换到 webpack 5 后，raw-loader 不再有效。 我在 webpack 5 中读到，不再需要使用raw-loader ，因为该功能内置于 webpack 中； https://webpack.js.org/guides/asset-modules/#source-assets

我创建了一个webpack.config.js文件：

module.exports = {
  module: {
    rules: [
      {
        resourceQuery: /raw/,
        type: 'asset/source'
      }
    ]
  }
};

我有一个 markdown 文件/docs/template.md ：

# My template

## Some section 1

some text

## Some section 2

some text

在我的js文件中，我尝试像这样导入内容：

import template from '@site/docs/template.md?raw';

console.log(template);

但是 webpack 没有将 markdown 文件的内容作为字符串加载，我得到了一些 mdx 内容：

ƒ MDXContent(_ref){let{components,...props}=_ref;return
(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_2__.mdx)(MDXLayout
(0,_Users_kevin_apps_docs_node_modules_babel_runtime_helpers_esm_ext…

知道我做错了什么吗？

Answer 1

我认为 Docusaurus 站点不尊重webpack.config.js文件，所以我使用docusaurus.config.js中的内联插件模块解决了这个问题：

/** @type {import('@docusaurus/types').Config} */
module.exports = {
  // ...other configs...,
  plugins: [
    // ...other plugins...,
    () => ({
      name: 'my-raw-loader',
      configureWebpack() {
        return {
          module: {
            rules: [
              {
                resourceQuery: /raw/,
                type: 'asset/source',
              },
            ],
          },
        };
      },
    }),
  ],
}