实践：开发一个自己的Loader 案例

开发一个markdown-loader

目的：可以在代码中直接导入markdown文件，导入的结果就是转换过后的HTML字符串

js

import about from './about.md'

console.log(about) // 转换过后的HTML字符串

安装npm i marked --save-dev
在webpack.config.js目录下添加一个markdown-loader.js

js

const marked = require('marked')
// 导出一个函数，输入是资源文件的内容
module.exports = source => {
  console.log(source)
  // 这个值就是html字符串，也就是转换过后的结果
  const html = marked(source)
  return html
}

在webpack.config.js中配置

js

{
  test: /\.md$/,
  // 这里除了可以写npm包名称，也可以写相对路径
  use: './markdown-loader'
}

准备about.md

md

# 目录
## 目标
自己做一个markdown-loader

在main.js中引用

js

import about from './about.md'
document.write(about)

尝试运行会正常输出，但是会报错，原因是，webpack内部像一个管道，可以在过程中依次使用过个loader，但是要求结果必须是一个JavaScript代码，这里返回的html结构不是一个JavaScript代码，所以解决办法有两种：

html结构换成JavaScript代码

导入模块，并使用

js

const marked = require('marked')
module.exports = source => {
  const html = marked(source)
  // 不能直接导出html变量，因为必须要转换成JavaScript代码
  // 这里使用stringify转换成一个标准的JSON字符串，其换行符和引号都会正确转义
  // 然后再对其进行拼接，就不会有问题了
  return `module.exports = ${JSON.stringify(html)}`
  // or ES Modules的形式也可以
  return `export default ${JSON.stringify(html)}`
}

这里在网页中显示正常

使用其他的loader对代码进行处理

这里将html直接导出，安装一个npm i html-loader --save-dev，在webpack.config.js中使用

js

{
  test: /\.md$/,
  //先执行markdown-loader，再执行html-loader
  use: [
    'html-loader',
    './markdown-loader'
  ]
}