feat: implement html-loader and markdown-loader and uninstall raw-loader

package.json

@@ -29,8 +29,9 @@
     "babel-jest": "^23.6.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "html-loader": "^0.5.5",
     "lint-staged": "^8.1.5",
-    "raw-loader": "^3.1.0",
+    "markdown-loader": "^5.1.0",
     "sass": "^1.17.4",
     "sass-loader": "^7.1.0",
     "vue-cli-plugin-vuetify": "^0.6.3",

src/App.vue

@@ -71,7 +71,6 @@
 
 <script>
 import { codemirror } from 'vue-codemirror'
-import marked from 'marked'
 
 export default {
   name: 'App',
@@ -110,7 +109,7 @@ export default {
     ])
 
     this.previewCode = code
-    this.previewReadme = marked(readme)
+    this.previewReadme = readme
   },
   methods: {
     toggleDrawer () {
@@ -125,7 +124,7 @@ export default {
     },
     importPreviewReadme () {
       return new Promise((resolve, reject) => {
-        import(`raw-loader!@/views/${this.$route.name}/README.md`)
+        import(`@/views/${this.$route.name}/README.md`)
           .then(({ default: result }) => { resolve(result) })
           .catch(error => reject(new Error(error.message)))
       })

vue.config.js

@@ -1,3 +1,19 @@
+const marked = require('marked')
+
+const renderer = new marked.Renderer()
+
 module.exports = {
-  lintOnSave: false
+  lintOnSave: false,
+  chainWebpack: (config) => {
+    config.module
+      .rule('markdown')
+      .test(/\.md$/)
+      .use('html-loader')
+      .loader('html-loader')
+      .end()
+      .use('markdown-loader')
+      .loader('markdown-loader')
+      .options({ pedentic: true, renderer })
+      .end()
+  }
 }