webpack-bolier-plate v1.0.0

Project Name : react-boiler-plate

This Project helps in understanding how the "create-react-app" works behind the scence. This react boiler plate project is built using webpack, babel and React.

Steps to follow to use this boiler-plate.

Steps that you should follow to build this boiler plate from scratch.

Open the command prompt and start executing the following commands sequentially.

Manipulation of Files.

• now create a file named webpack.config.js

• The following lines help to bundle all modules in app into single file. so let's define entry point and destination folder/filename.

    module.exports ={
        entry : './app/index.js',
        output : {
            path : path.resolve(__dirname,'dist'),
            filename : 'index_bundle.js'
        }
    }

• the followig lines help us set rules on our js and css files and how to deal with them and should be added after the 'output' entry in previous step.

    module :{
       rules :[
            { test : /\.(js)$/,use : 'babel-loader'},
            { test : /\.(css)$/,use:['style-loader','css-loader']}
        ]
    }

• now add following code, whcih defines which mode you want use your code and to which html page your bundle index_bundle.js file should be exported to. this should be added to module.export object.

    mode : 'development',
    plugins :[
        new HtmlWebpackPlugin({
            template : 'app/index.html'
        })
    ]

• create a new file named .babelrc and have following in that file.

    {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }

• add follolwing inside the "scripts" section, to build and launch the app inside package.json

    "build": "webpack",
    "launch": "webpack-dev-server --open"

• run "npm run build" to see your first build exported to 'dist' folder 😊

• now run the "npm run launch" command to see the app working.