Webpack esnext专用字段和方法的网页包加载程序？

所以我对webpack是新手，我正尝试将其配置为与esnext私有方法和字段一起使用。我还没有指定加载程序，但我不确定要使用哪个加载程序。当前，我的

webpack.config.js

文件如下所示：

const path = require("path");

module.exports = {
    entry: "./src/Rorke.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "rorke.js"
    }
};

import Sprite from "./Sprite";
const test = new Sprite(0, 0);

当我运行

webpack

时，它会抛出一个错误：

意外字符“#”

Rorke.js如下所示：

const path = require("path");

module.exports = {
    entry: "./src/Rorke.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "rorke.js"
    }
};

import Sprite from "./Sprite";
const test = new Sprite(0, 0);

而Sprite.js看起来像：

export default class Sprite {
    #x;
    #y;
    constructor(x, y) {
        this.#x = x;
        this.#y = y;
    }
}

当我使用不带私有字段的常规es6类时，它可以正常工作，但不带私有字段

---

我应该使用哪个加载程序/如何解决这个问题？

我用一个名为：

@babel/插件建议私有方法

//babel.config.js
module.exports={
预设：[
[
“@babel/preset env”，
{
目标：{node:“current”}，
},
],
“@babel/预设类型脚本”，
],
插件：[
“@babel/plugin建议私有方法”，
“@babel/插件建议类属性”，
“@babel/plugin提案对象剩余差价”，
],
};

你有没有想过这个问题？遗憾的是，我没有。虽然最近情况可能发生了变化？虽然这个链接可能会回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效-