https://github.com/zeeshandev15/react-setup-using-webapck-and-babel

**Webpack** is a module bundler that compiles JavaScript, CSS, and other assets, optimizing them for the web. In a **React** project, Webpack bundles components, allowing efficient development and production workflows. **Babel** is a JavaScript compiler that converts JSX (React syntax) and ES6+ code into compatible JavaScript for browsers.
https://github.com/zeeshandev15/react-setup-using-webapck-and-babel

babel react webpack

Last synced: about 4 hours ago
JSON representation

**Webpack** is a module bundler that compiles JavaScript, CSS, and other assets, optimizing them for the web. In a **React** project, Webpack bundles components, allowing efficient development and production workflows. **Babel** is a JavaScript compiler that converts JSX (React syntax) and ES6+ code into compatible JavaScript for browsers.

• Host: GitHub
• URL: https://github.com/zeeshandev15/react-setup-using-webapck-and-babel
• Owner: zeeshandev15
• Created: 2024-12-07T17:42:14.000Z (2 months ago)
• Default Branch: master
• Last Pushed: 2024-12-07T18:05:58.000Z (2 months ago)
• Last Synced: 2025-02-11T16:43:36.281Z (about 4 hours ago)
• Topics: babel, react, webpack
• Language: JavaScript
• Homepage:
• Size: 13.5 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React-setup-using-Webapck-and-Babel

🚀 Master React JS with Webpack and Babel  🚀

# Getting started

React JS setup using Webpack and babel

```bash

$ git clone https://github.com/Hi-Dear-486/React-setup-using-Webapck-and-Babel.git

$ cd ./

$ git checkout master

```

# Follow Some Steps for setup React JS Project

# 1. Create a root folder to initialize npm in it (optionally, it can also be initialized).

mkdir webpack

cd webpack

# 2. We need a package.json file to create modules, so we initialize npm

npm init -y

npm install react react-dom --save

# 3. Install webpack We need to install a webpack to create a bundler.

npm i -D webpack webpack-dev-server webpack-cli html-webpack-plugin

# 4. Install Babel Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react, and, HTML-webpack-plugin

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

# 5. To load CSS, you have to install CSS and style-loader.

npm i -D css-loader sass sass-loader style-loader url-loader 

# 6. Create .babelrc file

```bash

{

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

}

```

# 7. Create webpack.config.js

```bash

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

  output: {

    path: path.join(__dirname, "/dist"), // the bundle output path

    filename: "bundle.js", // the name of the bundle

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: "src/index.html", // to import index.html file inside index.js

    }),

  ],

  devServer: {

    port: 3000, // you can change the port

  },

  module: {

    rules: [

      {

        test: /\.(js|jsx)$/, // .js and .jsx files

        exclude: /node_modules/, // excluding the node_modules folder

        use: {

          loader: "babel-loader",

        },

      },

      {

        test: /\.(sa|sc|c)ss$/, // styles files

        use: ["style-loader", "css-loader", "sass-loader"],

      },

      {

        test: /\.(png|woff|woff2|eot|ttf|svg)$/, // to import images and fonts

        loader: "url-loader",

        options: { limit: false },

      },

    ],

  },

};

```