Vue cli添加Webpack rule显示markdown文件

vue cli添加webpack配置官网详解：
https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7

1. 新建md文件：

scr
|-assets
	|-hello.md

2. 创建用于显示markdown文档的markdown.vue

3. 添加Webpack配置
   在根目录下创建文件vue.config.js，这里的运行顺序同webpack原始配置顺序一致，从低到高运行。

//vue.config.js
module.exports = {
	chainWebpack: config => {
		const markdownRule = config.module.rule('markdown); //自动添加rule
		markdownRule.test(/\.md$/);
		markdownRule.use('vue-loader')
    	.loader('vue-loader')
    	.end()
    	.use('vue-markdown-loader')
    	.loader('vue-markdown-loader/lib/markdown-compiler')
    	.options({
     	raw: true
    	})
    	.end();
	}
}

vue inspect查看自定义rule：

vue inspect --rule markdown

结果：

/* config.module.rule('markdown') */
{
  test: /\.md$/,
  use: [
    /* config.module.rule('markdown').use('vue-loader') */
    {
      loader: 'vue-loader'
    },
    /* config.module.rule('markdown').use('vue-markdown-loader') */
    {
      loader: 'vue-markdown-loader/lib/markdown-compiler',
      options: {
        raw: true
      }
    }
  ]
}

从结果可以看出，与在webpack.config.js中定义的结构一样，只不过是包了一层语法糖