如何使用WebPack 5和Docusaurus读取Markdown File的原始内容

Question

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

该应用程序用于使用webpack 4和raw-loader读取文档模板的内容，然后与用户传递的内容进行查找和替换。自从我切换到WebPack 5，raw--装载机不再起作用。我在WebPack 5中读到，由于该功能已内置在WebPack中，因此不再需要使用RAW-LOADER。 https://webpack.js.s.js.org/guides/guides/guides/asset-modules/asset-modules/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的Inline插件模块解决了此问题：

/** @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',
              },
            ],
          },
        };
      },
    }),
  ],
}