实现一个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