{"id":25238081,"url":"https://github.com/zeeshandev15/react-setup-using-webapck-and-babel","last_synced_at":"2026-04-19T13:32:36.192Z","repository":{"id":267020899,"uuid":"900039331","full_name":"zeeshandev15/React-setup-using-Webapck-and-Babel","owner":"zeeshandev15","description":"**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.","archived":false,"fork":false,"pushed_at":"2024-12-07T18:05:58.000Z","size":14193,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-11T16:43:36.281Z","etag":null,"topics":["babel","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeeshandev15.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-07T17:42:14.000Z","updated_at":"2024-12-08T19:32:19.000Z","dependencies_parsed_at":"2024-12-07T19:28:20.849Z","dependency_job_id":null,"html_url":"https://github.com/zeeshandev15/React-setup-using-Webapck-and-Babel","commit_stats":null,"previous_names":["hi-dear-486/react-setup-using-webapck-and-babel","zeeshan-develop/react-setup-using-webapck-and-babel","zeeshandev15/react-setup-using-webapck-and-babel"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FReact-setup-using-Webapck-and-Babel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FReact-setup-using-Webapck-and-Babel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FReact-setup-using-Webapck-and-Babel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeeshandev15%2FReact-setup-using-Webapck-and-Babel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeeshandev15","download_url":"https://codeload.github.com/zeeshandev15/React-setup-using-Webapck-and-Babel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247385633,"owners_count":20930599,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","react","webpack"],"created_at":"2025-02-11T16:43:42.282Z","updated_at":"2026-04-19T13:32:36.120Z","avatar_url":"https://github.com/zeeshandev15.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-setup-using-Webapck-and-Babel\n🚀 Master React JS with Webpack and Babel  🚀\n\n# Getting started\nReact JS setup using Webpack and babel\n```bash\n$ git clone https://github.com/Hi-Dear-486/React-setup-using-Webapck-and-Babel.git\n$ cd ./\n$ git checkout master\n```\n\n# Follow Some Steps for setup React JS Project\n\n# 1. Create a root folder to initialize npm in it (optionally, it can also be initialized).\nmkdir webpack\ncd webpack\n\n# 2. We need a package.json file to create modules, so we initialize npm\nnpm init -y\nnpm install react react-dom --save\n\n# 3. Install webpack We need to install a webpack to create a bundler.\nnpm i -D webpack webpack-dev-server webpack-cli html-webpack-plugin\n\n# 4. Install Babel Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react, and, HTML-webpack-plugin\n\nnpm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader\n\n# 5. To load CSS, you have to install CSS and style-loader.\nnpm i -D css-loader sass sass-loader style-loader url-loader \n\n# 6. Create .babelrc file\n```bash\n{\n    \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"]\n}\n```\n\n# 7. Create webpack.config.js\n```bash\nconst path = require(\"path\");\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\nmodule.exports = {\n  output: {\n    path: path.join(__dirname, \"/dist\"), // the bundle output path\n    filename: \"bundle.js\", // the name of the bundle\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: \"src/index.html\", // to import index.html file inside index.js\n    }),\n  ],\n  devServer: {\n    port: 3000, // you can change the port\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx)$/, // .js and .jsx files\n        exclude: /node_modules/, // excluding the node_modules folder\n        use: {\n          loader: \"babel-loader\",\n        },\n      },\n      {\n        test: /\\.(sa|sc|c)ss$/, // styles files\n        use: [\"style-loader\", \"css-loader\", \"sass-loader\"],\n      },\n      {\n        test: /\\.(png|woff|woff2|eot|ttf|svg)$/, // to import images and fonts\n        loader: \"url-loader\",\n        options: { limit: false },\n      },\n    ],\n  },\n};\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeeshandev15%2Freact-setup-using-webapck-and-babel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeeshandev15%2Freact-setup-using-webapck-and-babel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeeshandev15%2Freact-setup-using-webapck-and-babel/lists"}