webpack remark-loader

通过 remark 加载 markdown。

用法

只需将 loader 添加到您的配置中,并设置 options。

import md from "markdown-file.md";
console.log(md);

webpack.config.js

import RemarkHTML from "remark-html";

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          {
            loader: "html-loader",
          },
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                plugins: [RemarkHTML],
              },
            },
          },
        ],
      },
    ],
  },
};

下面是 remark plugins 的完整列表。

我们不再支持任何 react 的特殊功能。 如果您对在 JSX 中使用 Markdown 感兴趣,请参阅很棒的 MDX 项目。

Options

Name Type Default Description
remarkOptions {Object} {} Remark options
removeFrontMatter {Boolean} true Remove removeFrontMatter

remarkOptions

Name Type Default Description
plugins Array<String|Array> [] Allows to connect remark plugins
settings {Object} undefined Remark settings
data {Object} undefined Information available to all plugins

plugins

Type: ​Array<String|Array>​ Default: []

可以和 remark plugins 一起使用

String

webpack.config.js

import RemarkFrontmatter from "remark-frontmatter";

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                plugins: [RemarkFrontmatter],
              },
            },
          },
        ],
      },
    ],
  },
};
Array

如果需要为插件指定 options,可以使用数组传递插件,其中第二个参数就是将要设置的 options。

webpack.config.js

import RemarkFrontmatter from "remark-frontmatter";
import RemarkBookmarks from "remark-bookmarks";

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                plugins: [
                  RemarkFrontmatter,
                  [
                    RemarkBookmarks,
                    {
                      bookmarks: {
                        npm: "https://npmjs.com/package/remark-bookmarks",
                      },
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

settings

Type: ​Object​ Default: undefined

将 remark-stringify options 选项和 remark-parse options 选项传递给 remark。

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                settings: {
                  bullet: "+",
                  listItemIndent: "1",
                },
              },
            },
          },
        ],
      },
    ],
  },
};

data

Type: ​Object​ Default: undefined

使用所有插件通用的配置 remark。 配置信息存储在内存中的键值存储中。

webpack.config.js

function examplePluginUsingData() {
  console.log(this.data);
  // { alpha: bravo, charlie: delta }
}

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                plugins: [examplePluginUsingData],
                data: {
                  alpha: "bravo",
                  charlie: "delta",
                },
              },
            },
          },
        ],
      },
    ],
  },
};

removeFrontMatter

Type: ​Boolean​ Default: true

默认情况下,refortmatter 是被移除的。 如果要覆盖这个配置,需要在插件中添加 remark-frontmatter,并设置 removeFrontMatter 为 false。

webpack.config.js

import RemarkFrontmatter from "remark-frontmatter";

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          {
            loader: "remark-loader",
            options: {
              removeFrontMatter: false,
              remarkOptions: {
                plugins: [RemarkFrontmatter],
              },
            },
          },
        ],
      },
    ],
  },
};

启发

这个项目收到了以下开源作品的启发:

  • react-markdown-loader
  • marksy

示例

Markdown 转为 HTML

要获得 html,需要在 remark 插件中添加 remark-html,并在 webpack.config 中添加 html-loader。

import md from "markdown-file.md";
console.log(md);

webpack.config.js

import RemarkHTML from "remark-html";

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          {
            loader: "html-loader",
          },
          {
            loader: "remark-loader",
            options: {
              remarkOptions: {
                plugins: [RemarkHTML],
              },
            },
          },
        ],
      },
    ],
  },
};

Markdown 转为 Markdown

index.js

import md from "markdown-file.md";
console.log(md);

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.md$/,
        use: [
          {
            loader: "remark-loader",
          },
        ],
      },
    ],
  },
};

贡献

如果您还没有贡献代码,请花点时间阅读我们的贡献指南。

License

MIT

作者:admin,如若转载,请注明出处:https://www.web176.com/webpack/22644.html

(0)
打赏 支付宝 支付宝 微信 微信
adminadmin
上一篇 2023年5月26日
下一篇 2023年5月26日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


Fatal error: Uncaught JSMin_UnterminatedStringException: JSMin: Unterminated String at byte 435: ", in /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php:214 Stack trace: #0 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php(152): JSMin->action() #1 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php(86): JSMin->min() #2 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(257): JSMin::minify() #3 [internal function]: AO_Minify_HTML->_removeScriptCB() #4 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(108): preg_replace_callback() #5 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/ao-minify-html.php(47): AO_Minify_HTML->process() #6 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/autoptimizeHTML.php(105): AO_Minify_HTML::minify() #7 /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/aut in /www/wwwroot/web176.cc/wp-content/plugins/autoptimize/classes/external/php/jsmin.php on line 214