React js babel transform and minification in asp.net core - reactjs

Question

I have a asp.net core 2.0 application and I am using react.js also. I have some jsx files in that.
I want to minify those jsx files and then use. For js & css minification,
I defined rules in bundleconfig.json but wiring rules for jsx throws errors.
Can anyone help me how I can minify jsx in asp.net core application.
Update
Below is my project structure
below is webpack.config file
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
process.traceDeprecation = true;
module.exports = {
entry: {
home: "./wwwroot/js/v2/userdefined/home.page.js"
},
output: {
path: path.resolve(__dirname, "wwwroot/dist"),
filename: "[name].js",
publicPath: "/dist/"
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null
}
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
})
]
},
plugins: [
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /jsx$/),
new webpack.LoaderOptionsPlugin({
options: {}
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
}),
new CompressionPlugin({
test: /\.(js|css)/
}),
new UglifyJsPlugin(),
new WebpackShellPlugin({
onBuildStart: ['echo "Starting postcss command"'],
onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
})
],
resolve: {
modules: [
path.resolve('./node_modules')
]
},
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
}
};
below is Gruntfile.js
/// <binding AfterBuild='cleanup' />
module.exports = function(grunt) {
require("jit-grunt")(grunt);
grunt.initConfig({
clean: ["./Modules/*"],
copy: {
main: {
expand: true,
src: [
"../Modules/**/bin/Debug/**/**/*.*",
"../Modules/**/wwwroot/**",
],
dest: "./Modules/"
},
css: {
expand: true,
cwd: "../Modules/AwesomeCMSCore.Modules.Frontend/wwwroot/dist",
src: ["cmscore.css"],
dest: "./wwwroot/dist/"
},
js: {
expand: true,
cwd: "../Modules/AwesomeCMSCore.Modules.Frontend/wwwroot/dist",
src: ["*.js"],
dest: "./wwwroot/dist/"
},
static: {
expand: true,
cwd: "../Modules/AwesomeCMSCore.Modules.Frontend/wwwroot/dist",
src: ["**"],
dest: "./wwwroot/dist/"
}
},
watch: {
css: {
files: ["../Modules/**/wwwroot/dist/*.css"],
tasks: ["copy:css"],
options: {
reload: true,
spawn: false
}
},
js: {
files: ["../Modules/**/wwwroot/dist/*.js"],
tasks: ["copy:js"],
options: {
reload: true,
spawn: false
}
}
}
});
grunt.registerTask("default", ["watch"]);
grunt.registerTask("cleanup", [
"clean",
"copy:main",
"copy:static"
]);
};
below is my package.json
{
"name": "ProjV2",
"version": "1.0.0",
"main": "index.js",
"author": "JitendraPancholi",
"license": "",
"scripts": {
"prod": "webpack -p --mode=production --config webpack.prod.js",
"start": "webpack --mode=development --config webpack.dev.js",
"lint:js": "eslint \"wwwroot/js/react/src/**/*.{js,jsx}\" --color",
"lint:style": "stylelint \"wwwroot/css/**/*.scss\" --syntax scss"
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "8.2.6",
"babel-loader": "7.1.5",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"compression-webpack-plugin": "1.1.11",
"css-loader": "1.0.0",
"cssnano": "^4.1.7",
"empty-module": "^0.0.2",
"eslint": "^5.0.0",
"eslint-loader": "2.0.0",
"eslint-plugin-react": "7.10.0",
"file-loader": "1.1.11",
"grunt": "1.0.3",
"grunt-contrib-clean": "1.1.0",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-watch": "1.1.0",
"jit-grunt": "0.10.0",
"jshint": "2.9.5",
"jshint-loader": "0.8.4",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "7.0.3",
"style-loader": "0.21.0",
"stylelint": "9.3.0",
"stylelint-config-recommended": "2.1.0",
"stylelint-config-recommended-scss": "3.2.0",
"stylelint-config-standard": "18.2.0",
"stylelint-scss": "3.1.3",
"uglify-js": "^3.4.9",
"uglifyjs-webpack-plugin": "1.2.7",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-merge": "^4.2.1",
"webpack-shell-plugin": "^0.5.0"
},
"dependencies": {
"#aspnet/signalr": "^1.1.0",
"#tinymce/tinymce-react": "^2.2.5",
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"chart.js": "^2.7.2",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"popper.js": "^1.14.1",
"prop-types": "^15.6.0",
"react": "^16.4.1",
"react-bootstrap-table": "^4.3.1",
"react-dom": "^16.4.1",
"react-select": "^1.2.1",
"react-values": "^0.2.4",
"reactstrap": "^6.3.0",
"toastr": "^2.1.4"
}
}
All my fils jsx files are as per below

Answer 1

You cant do that. React has to transform into js file in order to run in the browser
Normally you will need module bundle tool like webpack
You can view my full config here
Let me know if you need any more help
Update: Here is how I transform jsx into js
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},