readme wip

Author: tianyong90

README-CN.md

@@ -2,9 +2,9 @@
 
 [ENGLISH](./README.md)
 
-这是一个 Webpack loader，用于加载 markdown 文件。通过适当的配置，可以将 markdown 文件内容转换为一 vue sfc 组件对象或者 html 内容，此外还可以直接转换为一个包含解析结果、frontmatter 等数据的对象，因此，它可以很方便的与 vue-loader 或者 html-loader 配合使用，也可以单独使用。
+这是一个用于加载 markdown 文件的 Webpack loader。通过配置，可以将 markdown 文件内容转换为一 vue sfc 组件对象或者 html 内容，此外还可以直接转换为一个包含解析结果、frontmatter 等数据的对象。因此，它可以很方便的与 vue-loader 或者 html-loader 配合使用，也可以单独使用。
 
-项目的代码大部分提取自 vuepress 项目，但进行了一系列修改、修正以及优化，以便它能在非 [vuepress](https://github.com/vuejs/vuepress) 项目中使用。在此对这一官方包的开发者们表示感谢。如果你有兴趣，可以前往该项目，并 star。
+项目的代码大部分提取自 [vuepress](https://github.com/vuejs/vuepress) 项目，但进行了一系列修改、修正以及优化，使它能在非 vuepress 项目中使用。在此对这一官方包的开发者们表示感谢。如果你有兴趣，可以前往该项目查看源码并 star。
 
 ![screenshot](./images/screenshot.png)
 
@@ -18,6 +18,8 @@ npm i @tianyong90/vue-markdown-loader -S
 
 ### 与 vue-loader 一起使用
 
+一般情况下，推荐与 vue-loader 一起使用。
+
 1. 配置
 
 在 webpack.config.js 中为 .md 文件添加加载规则
@@ -59,7 +61,7 @@ module: {
 
 2. 将 `.md` 文件作为 vue 单文件组件导入
 
-```vue
+```html
 <template>
   <Hello />
 </template>
@@ -79,8 +81,72 @@ export default {
 
 ### 与 html-loader 一起使用
 
+vue-markdown-loader 也可以解析 markdown 文件，并返回一个包含 html 字符串供 html-loader 加载。
+
+1. 配置
+
+在 webpack.config.js 中为 .md 文件添加加载规则
+
+```js
+module: {
+  rules: [
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader'
+    },
+    {
+      test: /\.md$/,
+      use: [
+        {
+          loader: 'vue-loader',
+          options: {
+            compilerOptions: {
+              preserveWhiteSpace: false
+            }
+          }
+        },
+        {
+          loader: '@tianyong90/vue-markdown-loader',
+          options: {
+            // sourceDir: ''
+            contentCssClass: 'markdown-body',
+            markdown: {
+              lineNumbers: true, // 启用行号
+            }
+          }
+        }
+      ]
+    }
+  ]
+},
+// other options
+```
+
+2. 将 `.md` 文件作为 vue 单文件组件导入
+
+```html
+<template>
+  <Hello />
+</template>
+
+<script scoped>
+import Hello from 'hello.md'
+
+export default {
+  components: { Hello }
+}
+</script>
+
+<style>
+// 为解析出来的 markdown 元素添加样式
+</style>
+```
+
+
 ### 单独使用
 
+
+
 ## License
 
 MIT

package.json

@@ -7,7 +7,8 @@
     "dev": "yarn run build && lerna run dev --stream --scope example",
     "build": "lerna run build --scope @tianyong90/vue-markdown-loader",
     "demo": "lerna run dev --scope example --stream -- --colors",
-    "release": "yarn --pure-lockfile && node scripts/release.js"
+    "release": "yarn --pure-lockfile && node scripts/release.js",
+    "copy-readme": "bash scripts/copyreadme.sh"
   },
   "husky": {
     "hooks": {

packages/example/package.json

@@ -16,7 +16,6 @@
     "@tianyong90/vue-markdown-loader": "^0.1.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.0.0",
     "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.11.0",

packages/example/webpack.config.js

@@ -1,9 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
 
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 module.exports = {
@@ -105,7 +103,6 @@ module.exports = {
   },
   stats: 'minimal',
   plugins: [
-    new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       title: '@tianyong90/vue-markdown-loader example',
       filename: 'index.html',

scripts/copyreadme.sh

@@ -0,0 +1 @@
+cp ../README.md ../test.md

yarn.lock

@@ -1790,7 +1790,7 @@
     "@types/source-list-map" "*"
     source-map "^0.6.1"
 
-"@types/webpack@*", "@types/webpack@^4.4.31":
+"@types/webpack@*":
   version "4.39.1"
   resolved "https://registry.npm.taobao.org/@types/webpack/download/@types/webpack-4.39.1.tgz#d76cd551cc851198f67f75ff3e26551d204530e9"
   integrity sha1-12zVUcyFEZj2f3X/PiZVHSBFMOk=
@@ -3035,14 +3035,6 @@ clean-stack@^2.0.0:
   resolved "https://registry.npm.taobao.org/clean-stack/download/clean-stack-2.2.0.tgz?cache=0&sync_timestamp=1564586594378&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclean-stack%2Fdownload%2Fclean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha1-7oRy27Ep5yezHooQpCfe6d/kAIs=
 
-clean-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npm.taobao.org/clean-webpack-plugin/download/clean-webpack-plugin-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclean-webpack-plugin%2Fdownload%2Fclean-webpack-plugin-3.0.0.tgz#a99d8ec34c1c628a4541567aa7b457446460c62b"
-  integrity sha1-qZ2Ow0wcYopFQVZ6p7RXRGRgxis=
-  dependencies:
-    "@types/webpack" "^4.4.31"
-    del "^4.1.1"
-
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/cli-boxes/download/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"