準備的資源：

• 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講解教學視頻哦 🙂🙂🙂