如何使用 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',
              },
            ],
          },
        };
      },
    }),
  ],
}