{"id":24576447,"url":"https://github.com/hritik5102/webpack-babel-swc","last_synced_at":"2026-04-14T03:33:05.157Z","repository":{"id":272556988,"uuid":"793482827","full_name":"hritik5102/Webpack-Babel-SWC","owner":"hritik5102","description":"Create a React project structure from scratch","archived":false,"fork":false,"pushed_at":"2025-01-15T06:35:35.000Z","size":67,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-15T05:39:35.039Z","etag":null,"topics":["babel","javascript","react","swc","webpack"],"latest_commit_sha":null,"homepage":"https://webpack-babel-swc.vercel.app","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/hritik5102.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,"zenodo":null}},"created_at":"2024-04-29T09:59:03.000Z","updated_at":"2025-01-15T06:35:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"0fe438af-acaf-4c4c-ac66-af2e17dc9297","html_url":"https://github.com/hritik5102/Webpack-Babel-SWC","commit_stats":null,"previous_names":["hritik5102/webpack-babel-swc"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hritik5102/Webpack-Babel-SWC","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hritik5102%2FWebpack-Babel-SWC","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hritik5102%2FWebpack-Babel-SWC/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hritik5102%2FWebpack-Babel-SWC/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hritik5102%2FWebpack-Babel-SWC/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hritik5102","download_url":"https://codeload.github.com/hritik5102/Webpack-Babel-SWC/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hritik5102%2FWebpack-Babel-SWC/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31781292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","javascript","react","swc","webpack"],"created_at":"2025-01-23T22:39:10.654Z","updated_at":"2026-04-14T03:33:05.145Z","avatar_url":"https://github.com/hritik5102.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack + Babel + SWC ✨\n\nIn this project, we will dive into the process of creating a React project structure from scratch. We will also learn how to generate both development and production builds of React by utilizing Webpack as a bundler and Babel as a code transpiler. Additionally, we will explore how to use SWC, which is an alternative code transpiler to Babel. It’s noteworthy that SWC is 20 times faster than Babel on a single thread and 70 times faster on four cores.\n\nIf you aren't familiar with Babel and SWC, check out this repository.\n- [Fundamentals of babel](https://github.com/hritik5102/Fundamentals-of-babel)\n- [Fundamentals of SWC](https://github.com/hritik5102/Fundamentals-of-SWC)\n\n# Follow the below steps\n\n### Create a `package.json` file\n\n```bash\n$ npm init -y\n```\n\n### Install a react dependency\n\n```bash\n$ npm i react react-dom\n```\n\n### Create an `index.js` file under `src` directory\n\n```jsx\nimport React from \"react\";\n\nconst HelloWorld = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eHello World\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default HelloWorld;\n```\n\n### Install babel dependency\n```bash\n$ npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader\n```\n\n### Install webpack dependency\n\n```bash\n$ npm i -D webpack webpack-cli webpack-dev-server\n```\n\n### Babel Configuration\n\n```js\nmodule.exports = {\n  presets: [\n    [\n      \"@babel/preset-env\",\n      {\n        targets: {\n          // Specify your target environments here\n          browsers: [\"last 2 versions\", \"ie \u003e= 11\"],\n        },\n      },\n    ],\n    \"@babel/preset-react\"\n  ],\n};\n```\n\n### Webpack configuration with babel\n\n```js\nmodule.exports = {\n  mode: \"development\", // or \"production\"\n  module: {\n    rules: [\n      // if you want your code to be backwards compatible from older browser, you can use babel.\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: \"babel-loader\"\n        },\n      },\n    ],\n  },\n};\n```\n\n### Add script to execute webpack in the `package.json`\n\n```json\n\"scripts\": {\n    \"dev\" : \"webpack --mode development\"\n}\n```\n\n### Run the build script\n\n```bash\n$ npm run dev\n```\n\n### What's next?\n\nAs the transpilation was successful, we can see our ES5 code is generated, now this is great it worked wonderfully, but this is not helpful because we want to see our app in action in the browser.\n\n### Install an HTML Webpack Plugin\n\n```bash\n$ npm i -D html-webpack-plugin\n```\n\n### Create a webpack config file\n\n```js\nconst path = require(\"path\");\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\n\nmodule.exports = {\n  mode: \"development\",\n  entry: {\n    bundle: path.resolve(__dirname, \"src/index.js\"),\n  },\n  output: {\n    path: path.resolve(__dirname, \"dist\"),\n    filename: \"[name].js\", // bundle.js\n  },\n  module: {\n    rules: [\n      // if you want your code to be backwards compatible from older browser, you can use babel.\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: \"babel-loader\",\n          options: babelConfig,\n        },\n      }\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      title: \"Hritik App\",\n      filename: \"index.html\",\n      template: \"public/index.html\",\n    }),\n  ],\n}\n```\n\n### Move content of index.js to `components/app.js`\n\n```jsx\nimport React from \"react\"\n\nconst HelloWorld = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003ch1\u003eHello World\u003c/h1\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default HelloWorld;\n```\n\n### Inside `index.js` file will mount a react component\n\n```js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./components/App\";\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"app\"));\n```\n\n### Create `index.html` inside public directory\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eHritik - App\u003c/title\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n  \n\u003c/html\u003e\n```\n\n### Add the scripts to start the development server inside `package.json`\n\n`package.json`\n```json\n\n\"scripts\": {\n    \"start\" : \"webpack-dev-server --mode development --open\"\n}\n\n```\n\n### Start the development server\n```bash\n$ npm run start\n```\n\n## Switching from babel to SWC 🚀\n\n### Install a dependency\n```bash\n$ npm i -D @swc/core swc-loader\n```\n\n### Replace babel-loader with SWC loader inside a webpack config\n\n```js\n  module: {\n    rules: [\n      // if you want your code to be backwards compatible from older browser, you can use babel.\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: {\n          loader: \"swc-loader\"\n        },\n      }\n    ],\n  },\n```\n\n### Create `.swcrc` config\n\n```js\n  jsc: {\n    parser: {\n      syntax: 'typescript', // Specify the syntax (jsx is automatically detected within TypeScript)\n    },\n    transform: {\n      react: {\n        pragma: 'React.createElement', // JSX pragma\n        pragmaFrag: 'React.Fragment', // Fragment pragma\n        throwIfNamespace: false, // Enable JSX fragment support\n        development: false, // Optimize for production\n        useBuiltins: true, // Use builtins for JSX transform\n      },\n    },\n  },\n  target: 'es5', // Transpile to ES5 syntax\n```\n\n### Start the development server, things will work as expected but now transpilation step will be faster with `SWC` as compared to `babel`\n```bash\n$ npm run start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhritik5102%2Fwebpack-babel-swc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhritik5102%2Fwebpack-babel-swc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhritik5102%2Fwebpack-babel-swc/lists"}