Create basic code for main.js, root component, vendor.ts and webpack files in react seed app

main.js

import React from "react";
import ReactDOM from "react-dom"

import RootComponent from "./app/RootComponent";

ReactDOM.render(
    <RootComponent />,
    document.getElementById('root')
);

rootComponent.jsx

import React, { Component } from "react";

export default class RootComponent extends Component {
    render() {
        return (
            <div>
                Hello World                      
            </div>
        )
    }
}

/*------------------ Use below code after installing react router and redux ----------------*/
// import React, { Component } from "react";
// import { BrowserRouter } from "react-router-dom";
// import MainLayout from "./MainLayout";
// import { Provider } from "react-redux";

// import SepStore from "./store/store";

// export default class RootComponent extends Component {
//     render() {
//         return (
//             <Provider store={SepStore}>
//                 <BrowserRouter>
//                     <MainLayout />
//                 </BrowserRouter>
//             </Provider>
//         )
//     }
// }

vendor.ts

import 'react'
import 'react-dom'
// after installing react router 
import 'react-router'
import 'react-router-dom'
// after installing redux
import 'redux'
import 'react-redux'
import 'redux-thunk'
import 'redux-logger'

// third party libraries
import 'jquery'
import 'popper.js'
import 'bootstrap'
import 'bootswatch/dist/sketchy/bootstrap.min.css'

webpack.common.js

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        vendor: "./vendor.js",
        app: "./src/main.js"
    },

    resolve: {
        extensions: [".js", ".jsx"]
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: "file-loader?name=public/fonts/[name].[ext]"
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({ //finds index.html as root and bundles n inject above js bundles into script
            template: "./index.html",   // Input FileName
            filename: "./index.html"    // Output FileName
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            "window.jQuery": 'jquery'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],

    optimization: {
        splitChunks: {
            chunks: "all"
        }
    }
};

webpack.dev.js

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const path = require('path');
const rootDir = path.resolve(__dirname, "..");

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: path.resolve(rootDir, 'dist'),
        publicPath: 'http://localhost:4000/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    devServer: {
        inline: true,
        port: 4000,
        historyApiFallback: true,
        stats: 'minimal'
    }
});

webpack.prod.js

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const path = require('path');
const rootDir = path.resolve(__dirname, "..");

module.exports = webpackMerge(commonConfig, {
    output: {
        path: path.resolve(rootDir, 'dist'),
        publicPath: './',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({}),
            new OptimizeCSSAssetsPlugin({})
        ]
    }
});