MarkdownToHtmlWebpackPlugin

一个在构建过程中将 Markdown 文件转换为 HTML 文件的 Webpack 插件。

功能

• 将 Markdown 文件转换为 HTML 文件。
• 无缝集成到 Webpack 中。
• 简单配置。

安装

通过 npm 安装插件：

npm install ldr-webpack-md-loader

使用方法

1. 添加插件配置

在你的 Webpack 配置文件 webpack.config.js 中添加插件和加载器配置：

const path = require('path');
const MarkdownToHtmlPlugin = require('./node_modules/ldr-webpack-md-loader/MarkdownToHtmlPlugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          path.resolve(__dirname, './node_modules/ldr-webpack-md-loader/markdown-loader.js')
        ]
      }
    ]
  },
  plugins: [
    new MarkdownToHtmlPlugin({
      input: 'src/about.md',
      output: 'about.html',
    }),
  ],
};

2. 示例 Markdown 文件

在你的 src 目录下创建一个 Markdown 文件，例如 about.md：

# About

这是一个示例的 Markdown 文件。

3. 运行构建

运行 Webpack 构建：

npm run build

运行构建后，你应该会在 dist 目录下看到生成的 about.html 文件。

插件选项

MarkdownToHtmlPlugin 构造函数接受一个选项对象，包含以下属性：

• input：相对于项目根目录的输入 Markdown 文件路径。
• output：相对于 Webpack 配置中 output.path 目录的输出 HTML 文件路径。

示例

new MarkdownToHtmlPlugin({
  input: 'src/about.md',
  output: 'about.html',
});