最近自己在做一个纯前端的的博客，需要将markdown的文件博客内容展示到页面，本文记录如何读取文件内容并将内容转为html展示。

1.借助webpack的remark-loader解析文件

webpack配置如下：

import RemarkHTML from "remark-html";

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

配置后即可在代码中使用import 引入md文件；

注：如果使用了ts，import md from "module.md"会提示无法识别模块，需要增加类型声明：

declare module "*.md" {
  const content: string;
  export default content;
}

如此即可正常解析md文件.

更多remark-loader配置详见: