鍍金池/ 問答/HTML/ webpack + typescript 如何導(dǎo)入 markdown 文件的內(nèi)容

webpack + typescript 如何導(dǎo)入 markdown 文件的內(nèi)容?

使用的是 webpack + typescript,打算在代碼中直接 import content from 'path/to/markdown/file' 這樣來導(dǎo)入 markdown 文件的內(nèi)容,查閱相關(guān)資料,編寫 modules.d.ts 文件如下:

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

然后在 ts 文件中直接使用 import 導(dǎo)入, 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 語句導(dǎo)入的內(nèi)容變成了路徑本身,例如:

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

想請教一下,在這種情況下正確的加載 markdown 文件的方法應(yīng)該是怎樣的?

回答
編輯回答
兮顏

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

2017年12月12日 16:27
編輯回答
愚念

肯定不能直接import的,要配置loader,像樓上說的用vue-markdown-loader,也可以參考https://github.com/peerigon/m...

2017年4月5日 16:10