实现一个解析md文件的loader

实现一个loader,将md文件转换为html的字符串.首先我们创建一个markdown-loader.js的文件
我们需要下载marked去解析markdown文件

npm i marked

每一个webpack-loader都需要导出一个函数,这个函数就是对传进来的资源的一个处理过程,输入就是文件的内容,输出就是次此加工过后的结果.

module.exports =  sourse => {
	const html = marked(sourse) //将markdown文件解析出来
	return html //返回的是html字符串
}

因为loader返回结果必须是JavaScript代码,直接发挥字符串会识别不了,所以我们需要将这个html字符串交给html-loader来处理

npm i html-loader

const path = require('path')
module.exports = {
    mode:'development'
    entery:''
    output:{
    filename:''
    path:path.join(__dirname,'output')
    publicPath:'dist/'
}
module:{
    rules:[
        {
            test:/.md$/,
            use:['html-loader',
                 './markdown-loader'] //先执行markdown-loader
        }
    ]
}
}

这样就完成了,可以发现loader的工作原理非常简单,就是负责资源文件从输入到输出的转换,而且loader是一个管道的概念,处理文件的时候可以使用多个loader