[loader]编写markdown-loader

121 阅读1分钟

尝试写一个简单的loader,实现把markdown文件转为html文件展示

  1. 安装插件:yarn add marked -D
  2. 编写marked-loader.js
const marked = require('marked')
module.exports = source => {
 const html = marked(source)
 // 因为loader需要返回的是一个JavaScript文件
 // 第一种方式使用module.exports 或者 export default
 // return `module.exports = ${JSON.stringify(html)}`
 // return `export default ${JSON.stringify(html)}`
 // 第二种方式
 // 借助别的loader处理,直接return  html字符串,借助html-loader处理,这里需要在webpack.config.js配置
 return html
}

3.修改 webpack.config.js

// use里使用的loader可直接是路径、执行顺序是从后往前,所以需要【markdown-loader】先执行
module: {
  rules: [
    {
      test: /.md$/,
      use: ['html-loader', './markdown-loader']
     }
  ]
}

4.页面展示