webpack-bolier-plate

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.

1. You can either clone the repo by using command git clone https://github.com/Kailashw/webpack-boiler-plate or simply downloading the zip file from the location.
2. Go to the location of downloaded file and open command prompt.
3. Run "npm install"
4. Followed by "npm launch"

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

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

1. mkdir webpack-bolier-plate
// this is the folder that we will work on
2. cd webpack-bolier-plate
3. npm init -y
// to create a package.json file.
4. npm install react react-dom
// installing react and react-dom
5. npm install --save-dev @babel/core @babel/preset-env @babel/preset-react css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server babel-loader
// installing supporting libraries

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.

NOTE: I have followed this youtube video tutorial but added my own customization on top of it.