this.data = require("/static/content/" + this.place + "/main.json")

This is work.

    this.path = "/static/content/" + this.place
    this.data = require(this.path + "/main.json")

This is bad.

The error look like this:

Uncaught Error: Cannot find module '/static/content/Suzanne/main.json'
at webpackEmptyContext (.json$:2:1)
at EExplore.init (EExplore.js:9:21)
at new EExplore (EExplore.js:3:1)
at Module.1213 (explore.js:5:1)
at __webpack_require__ (bootstrap:24:1)
at __webpack_exec__ (explore.js:39:1)
at explore.js:39:1
at Function.__webpack_require__.O (chunk loaded:23:1)
at explore.js:39:1
at webpackJsonpCallback (jsonp chunk loading:521:1)

I'm really confused.

Is there any difference between these two forms?

My webpack config file is here if you needed

    devServer: {
    watchFiles: ["src/**", "static/**"],
    static: {
        watch: true,
        directory: path.join(__dirname, "./static"),
    },
},
plugins: [
    ...
    new CopyWebpackPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, "./static"),
                to: "static/",
            },
        ],
    }),