写一个简单的loader

loader就是帮webpack去解析除了js外的文件，这里写一个解析md文件的 md-loader

step1.在src里新建一个test.md

• my-vue-cli\src\test.md ```javascript
• 你好

h2

<a name="mlvyo"></a>
### step2.下载依赖模块
```javascript
npm install markdown-it -D

step3.配置自己写的loader路径

//my-vue-cli\build\webpack.base.js
{
  test: /.md$/,
  use: path.resolve('./src/myLoader/md-loader.js')
}

step4.新建文件写md-loader

//src/myLoader/md-loader.js
const { getOptions } = require('loader-utils')
const MarkdownIt = require('markdown-it')
module.exports = function (source) {
  const options = getOptions(this) || {}
  const md = new MarkdownIt({
    html: true,
    ...options
  })
  let html = md.render(source)
  html = `module.exports = ${JSON.stringify(html)}`
  this.callback(null, html)
}

step5.在页面上使用

• my-vue-cli\src\main.js

  import Vue from 'vue'
  import App from '@/App.vue'
  // import { add } from './tools/add.js'
  // import './styles/index.scss'
  import mdHtml from './test.md'
  const content = document.createElement('div')
  content.className = 'content'
  content.innerHTML = mdHtml
  document.body.appendChild(content)
  new Vue({
  render: (h) => h(App)
  }).$mount('#app')
  

  step6.看到结果