自定义一个处理Markdown的loader需要做什么呢

仅需两步：

• 需要一个loader模块
• 在加载.md文件时，引入这个模块

自定义loader模块

// md_loader.js
const { marked } = require("marked")

module.exports = function (content) {
    // 第一个参数content就是我们的文件内容
    // 将md语法转为html元素结构
    const htmlContent = marked(content)
    console.log(htmlContent);
    // 返回的结果必须是模块化内容
    const innerContent = "`" + htmlContent + "`";
    const moduleConntent = `var code = ${innerContent}; export default code`

    return moduleConntent
}

至于为什么返回的结果必须是模块，俺也不知道，有知道的大佬可以在评论区指导一下俺，谢谢啦。

这里还需要下载一个marked的第三方库，也就是用于将md转换为html，执行命令npm i marked安装即可

在webpack.config.js中配置

 module: {
        rules: [
            // md
            {
                test: /\.md$/,
                use: [
                    {
                    // 这里就是上边定义的loader模块，其他配置在这里先省略了
                        loader: "md_loader.js"
                    }
                ]
            }
        ]
    },

打包后放到网页效果

原文效果