准备的资源：

• highlight.js ： 实现代码高亮，通过npm install highlight.js -D安装

• vue-markdown-loader：解析md文件的必备loader，通过npm install vue-markdown-loader -D安装

下面我们分两个场景来说明一下md文件的解析

Webpack

1. 在项目根目录下创建build/webpack.config.js

   // 在webpack.config.js中添加规则
   {test: /\.md$/,loader: 'vue-markdown-loader',
   }
   

2. 在main.js中配置样式文件

   // main.js
   import hljs from 'highlight.js';
   import 'highlight.js/styles/atom-one-light.css';
   

Vue-Cli

1. 在项目根目录下创建vue.config.js

   // 在vue.config.js中添加
   // webpack配置
   chainWebpack: (config) => {config.module.rule('markdown').test(/\.md$/).use('vue-loader').loader('vue-loader').end().use('vue-markdown-loader').loader('vue-markdown-loader/lib/markdown-compiler').options({preset: 'default',breaks: true,raw: true,typographer: true,})
   },
   

2. 在main.js中配置样式文件

   // main.js
   import hljs from 'highlight.js';
   import 'highlight.js/styles/atom-one-light.css';
   

最终效果

最后喜欢我的小伙伴也可以通过关注公众号“剑指大前端”，或者扫描下方二维码联系到我，进行经验交流和分享，同时我也会定期分享一些大前端干货，让我们的开发从此不迷路。

关注后，回复“webpack”，即可获取最新webpack讲解教学视频哦 🙂🙂🙂