Use npm in Asp .Net Core 6 MVC project (instead of CDNs)

I'm trying to use npm inside .Net core 6 MVC project. I have added the file webpack.config.js as following:

module.exports = {
    entry: [
        "babel-polyfill",
        "./src/main"
    ],
    output: {
        publicPath: "/js/",
        path: path.join(__dirname, "/wwwroot/js/"),
        filename: "main.build.js"
    }
};

In addition to the files package.json and package-lock.json those been generated automatically when running npm init and installing some libraries.
However, in my HTML I have referred to the file main.build.js as following: <script src="~/js/main.build.js" asp-append-version="true"></script>
In my program.cs I have already added:
app.UseDefaultFiles();
app.UseStaticFiles();

The problems I'm facing are the following:

• In main.build.js on let Web3 = require('web3'); I'm getting the error require is not defined
• I'm converting require statement to import Web3 from "web3", I'm getting the error Cannot use import statement outside a module.
• I'm inserting type="module" in <script src="~/js/main.build.js" type="module" asp-append-version="true"></script> then I'm getting the error Failed to resolve module specifier "web3". Relative references must start with either "/", "./", or "../".
• Thus I'm trying to navigate to the accurate relative path by starting with ../../node_modules/ as import Web3 from "../../node_modules/web3"; so I'm getting the error GET https://localhost:7101/node_modules/web3 net::ERR_ABORTED 404
• I need, in addition, to use npm packages in several js files, not only inside main.build.js, so what else should be done inside webpack.config.js?

Any hints, tutorials, help, or recommendation will be appreciated. I would love also to see a GitHub code example where npm is used inside .Net Core 6 MVC project.

My project structure is as following: