Webpack在要求加载Markdown文件时报错

Question

raw-loader 在尝试引入任何 .md 文件时会出错。

在引入 markdown 文件时添加 raw loader：

  test: /\.md$/i,
      use: [{
        loader: 'raw-loader',
        options: {
          esModule: false
        }
      }],

在 .js 文件中，需要引入 markdown 文件。

return require(postPath)
// postPath is '../posts/awards.md'

Error: Cannot find module '../posts/awards.md'
at webpackEmptyContext (eval at <path to file>)
....

Markdown文件路径为相对路径：/posts/awards.md

如果我将awards.md更改为awards.json，它会起作用。因此，这可能是raw-loader在awards.md中寻找export但未找到的问题，从而导致错误？esModule: false的意义不是告诉Webpack不要将其视为模块吗？

- GN.

Answer 1

看起来你遇到了和这个人一样的问题。

引用一个答案：

Webpack在构建时执行静态分析。

它不会尝试推断导入(test)可能是任何东西的变量，因此失败。

对于import(path+"a.js")也是如此。

如果你需要真正动态的导入，你必须将其限制为已知路径：

import("./locales/" + locale + ".js")

我重新创建了你的问题，果然如此：

function test(mod) {
    return require(mod)
}

console.log(test("./test.md"))

无法工作。 然而 这个可以：

function test(mod) {
    return require("./" + mod)
}

console.log(test("test.md"))

所以只需要将您的代码更改为以下内容即可：

return require("../" + postPath + ".md")

将 postPath 更改为：

// postPath is 'posts/awards'

- Marco

---

如果 OP 把文件扩展名从变量中去掉，那就更好了。这样，require(\../${postPath}.md`)就会告诉 Webpack 只打包所有.md` 文件。 - Phil