readme

Author: tianyong90

README-CN.md

@@ -45,7 +45,6 @@ module: {
         {
           loader: '@tianyong90/vue-markdown-loader',
           options: {
-            // sourceDir: ''
             contentCssClass: 'markdown-body',
             markdown: {
               lineNumbers: true, // 启用行号
@@ -98,21 +97,12 @@ module: {
       test: /\.md$/,
       use: [
         {
-          loader: 'vue-loader',
-          options: {
-            compilerOptions: {
-              preserveWhiteSpace: false
-            }
-          }
+          loader: 'html-loader',
         },
         {
           loader: '@tianyong90/vue-markdown-loader',
           options: {
-            // sourceDir: ''
-            contentCssClass: 'markdown-body',
-            markdown: {
-              lineNumbers: true, // 启用行号
-            }
+            mode: 'html', // 重要
           }
         }
       ]
@@ -124,28 +114,59 @@ module: {
 
 2. 将 `.md` 文件作为 vue 单文件组件导入
 
-```html
-<template>
-  <Hello />
-</template>
-
-<script scoped>
+```js
 import Hello from 'hello.md'
 
-export default {
-  components: { Hello }
-}
-</script>
-
-<style>
-// 为解析出来的 markdown 元素添加样式
-</style>
+console.log(Hello)
 ```
 
+加载的 Hello 结果如下：
+
+![加载后的 html](./images/md-html-string.png)
 
 ### 单独使用
 
+vue-markdown-loader 也可以解析 markdown 文件，并返回一个包含 html 字符串供 html-loader 加载。
+
+1. 配置
+
+在 webpack.config.js 中为 .md 文件添加加载规则
+
+```js
+module: {
+  rules: [
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader'
+    },
+    {
+      test: /\.md$/,
+      use: [
+        {
+          loader: '@tianyong90/vue-markdown-loader',
+          options: {
+            mode: 'raw', // 重要
+            contentCssClass: 'markdown-body',
+          }
+        }
+      ]
+    }
+  ]
+},
+// other options
+```
+
+2. 将 `.md` 文件作为一个对象导入
+
+```js
+import Hello from 'hello.md'
+
+console.log(Hello)
+```
+
+加载后的对象包含 attributes(frontmatter 数据)和 html(解析后的 html 内容)，如下图：
 
+![加载后的对象](./images/md-raw-object.png)
 
 ## License
 

images/md-html-string.png

@@ -17,6 +17,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "css-loader": "^3.0.0",
+    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.11.0",
     "sass-loader": "^8.0.0",

images/md-raw-object.png

@@ -51,7 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "^2.0.0",
     "babel-loader": "^8.0.5",
-    "eslint": "^6.0.1",
+    "eslint": "^6.3.0",
     "eslint-config-prettier": "^6.0.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-friendly-formatter": "^4.0.1",