support for VS2019+ build option

[csimone86]

Hi everyone,
I am new in react, node.js and all this world...

I am building my first application with VS2019. Well, when I use babel-loader I cannot build my application using VS2019 IDE. I must build it via command prompt, then run it from Visual studio.
At the moment I have solved installing ts-loader, even if I do not need it.

I try to explain myself better:

I have created a nodejs project in VS2019. Here my package.json:

{
  ...
  "dependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "express": "^4.17.1",
    "html-webpack-plugin": "^5.3.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "ts-loader": "^9.2.5",  <---- this is the workaround. I do not need it
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2"
  },
  "scripts": {
    "clean": "",
    "build": "webpack-cli ./src/index.jsx --config webpack.config.js"
  }
}

Then I have added webpack.config.js:

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
        watch: false,
        entry: './src/app.tsx',
        mode: 'development',
        output: {
            filename: './app.js'
            ,
            path: path.resolve(__dirname, 'dist')
        },
        resolve: {
            extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
        },
        module: {
            rules: [
                {
                    test: /\.jsx$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-react']
                            ]
                        }
                    }
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html'
            })
        ]
    };

Finally, I have all file I need for my application.

Well, everytime I modify my application, I should open the console and run the command npx webpack, then files in dist folder are generated. So, I come back to VS2019 and I run my application.

I would like avoiding write manually the command to build the application and build it when I click on 'rebuild' on VS2019

VS2019 Rebuild command

Now I have solved installing ts-loader. But what is wrong in my configuration? Or is not possible do it with babel?

Thank you