webpack + typescript 如何导入 markdown 文件的内容？

Question

使用的是 webpack + typescript，打算在代码中直接 import content from 'path/to/markdown/file' 这样来导入 markdown 文件的内容，查阅相关资料，编写 modules.d.ts 文件如下：

declare module "*.md" {
    const content: string;
    export default content;
}

然后在 ts 文件中直接使用 import 导入， tslint 不报错，但 webpack 打包时报错：

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.

随后尝试用 file-loader 加载 md 文件，webpack.config.js 片段如下：

module: {
    rules: [{
            test: /\.md$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: 'file/[name].[hash:6].[ext]'
                }
            }
        }
    ]
}

此时 webpack 打包过程无报错，但 import 语句导入的内容变成了路径本身，例如：

import content from './file/markdown.md';
console.log(content); // 输出 “./file/markdown.(哈希).md”

想请教一下，在这种情况下正确的加载 markdown 文件的方法应该是怎样的？

Answer 1

肯定不能直接import的，要配置loader，像楼上说的用vue-markdown-loader，也可以参考https://github.com/peerigon/m...

Answer 2

使用vue-markdown-loaderhttps://github.com/QingWei-Li...