Webpack 4 - 找不到JSON模块

Question

我的Webpack应用程序中有一些我要导入的JSON文件。它们的名称包括0.json，1.json，2.json等，并且位于目录src/res/level/内。当我在我的代码中尝试require()时，它不起作用：

private loadWorld() {

    // load the level
    // duplicate the object to avoid modifying the actual instance
    // that json-loader created
    this.state.level = JSON.parse(JSON.stringify(require(`@res/level/${this.level}.json`))) as LevelData;

    // ...

}

我方法中的这一行总是会抛出一个错误：

Error: Cannot find module "@res/level/1.json".
    at webpackContextResolve (webpack-internal:///9:16:11)
    at webpackContext (webpack-internal:///9:9:11)

然而，我无法弄清楚为什么。并且为了让事情更加混乱，如果我在监视模式下运行Webpack，并且在我的程序尝试运行它之前编辑了这行，那么JSON文件会突然正确加载。

我已正确配置@res的别名：

resolve: {
    extensions: [".ts", ".js", ".glsl", ".json"],
    alias: {
        "@res": path.join(__dirname, "src/res"),
        "@lib": path.join(__dirname, "src/lib"),
        "@shader": path.join(__dirname, "src/shader"),
        "@control": path.join(__dirname, "src/control"),
        "@scene": path.join(__dirname, "src/scene"),
        "@util": path.join(__dirname, "src/util"),
    }
}

因为这是Webpack 4，我只是没有包含JSON的加载器。 那为什么这不起作用？

另外，我注意到当我检查生成的代码时，我看到了：

这表明正在加载JSON文件，但不在我期望的目录下。

Answer 1

当我使用字符串连接而不是模板字符串时，编译器开始一致地加载JSON文件：

this.state.level = JSON.parse(JSON.stringify(require("@res/level/" + this.level.toString() + ".json"))) as LevelData;