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

0 0 webpack typescript
wolfing_8
wolfing_8

声望值:5 0人

2019-01-26 15:17:37 提问

关注 0关注

收藏 0收藏, 34浏览

使用的是 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 文件的方法应该是怎样的?

请先 登录 后评论

2个回答

  • wy小骑士55声望 2018-09-25 09:28

    使用vue-markdown-loaderhttps://github.com/QingWei-Li...
    请先 登录 后评论
  • wy小骑士55声望 2018-09-25 09:28

    肯定不能直接import的,要配置loader,像楼上说的用vue-markdown-loader,也可以参考https://github.com/peerigon/m...
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问