自定义webpack-loader

168 阅读1分钟

目标:实现解析.md文件的loader

.md文件以html格式的字符串形式输出

新建md-loader.js文件

先 npm i marked --save-dev 安装marked插件
const {marked} =  require('marked')//记得加花括号以解构的形式获取marked

module.exports = source=> {
    // 将marked转为html字符串
    const htmlStr = marked(source)
    // 将html字符串转化成一段可以导出的js代码
    const codeStr = `module.exports = ${JSON.stringify(htmlStr)}`
    return codeStr
}

在webpack.config.js中添加loader

...
 module:{
        rules:[
            {
                test:/\.md$/, use: ['./loader/md-loader']
            }
        ]
    }
...

在js文件里面引入.md文件并输出html字符串

import about from './about.md'
console.log(about);