Hypertechblog

Run this commands form terminal or cmd npm init npm i webpack --save-dev npm i webpack-cli --save-dev  npm install -D babel-loader @babel/core @babel/preset-env webpack  npm i @babel/preset-react --save-dev npm i babel-core --save-dev npm i babel-preset-env --save-dev npm i babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev npm i react react-dom --save-dev npm install webpack-dev-server -g   // In window and mac os this command will not work then use this npm i webpack-dev-server --save-dev Create a new file named Webpack.config.js into root directory copy and paste this code into webpack.config.js file var path = require('path'); module.exports = {    entry: './src/main.js', // Bundle all assets from this location together    output: {        filename: 'index.js', // Output to this file        path: path.resolve( __dirname, 'public' ), // In this location    },    module: {        rules: [        

Webpack is a tool that puts all your assets including images,javascript ,fonts and css in a dependency graph entry point: is the file webpack looks for to start building your Javascript bundle webpack’s main strength is code splitting. It introduce a production mode and development mode. As ,, Syntax of  ReactJS is based on ES6. old browsers doesn’t understand ES6. So , to run JS we need something which transform our ES6 code to browser understand language , the same thing is done by babel-loader. Babel-loader is a webpack loader for transpiling ES6 and above , down to ES5. For this, you need three things - babel-core, babel-loader, babel-preset-env   Commands- 1. npm init: This cmd create a package.json file . 2.npm i webpack --save-dev: This cmd generate dependencies for webpack in package.json file. Like "devDependencies": {    "webpack": "^4.16.2"  } 3. npm i webpack-cli --save-dev : This cmd is