https://github.com/hritik5102/webpack-babel-swc
Create a React project structure from scratch
https://github.com/hritik5102/webpack-babel-swc
babel javascript react swc webpack
Last synced: 3 months ago
JSON representation
Create a React project structure from scratch
- Host: GitHub
- URL: https://github.com/hritik5102/webpack-babel-swc
- Owner: hritik5102
- Created: 2024-04-29T09:59:03.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-15T06:35:35.000Z (over 1 year ago)
- Last Synced: 2025-06-15T05:39:35.039Z (about 1 year ago)
- Topics: babel, javascript, react, swc, webpack
- Language: JavaScript
- Homepage: https://webpack-babel-swc.vercel.app
- Size: 65.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack + Babel + SWC ✨
In 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.
If you aren't familiar with Babel and SWC, check out this repository.
- [Fundamentals of babel](https://github.com/hritik5102/Fundamentals-of-babel)
- [Fundamentals of SWC](https://github.com/hritik5102/Fundamentals-of-SWC)
# Follow the below steps
### Create a `package.json` file
```bash
$ npm init -y
```
### Install a react dependency
```bash
$ npm i react react-dom
```
### Create an `index.js` file under `src` directory
```jsx
import React from "react";
const HelloWorld = () => {
return (
Hello World
);
};
export default HelloWorld;
```
### Install babel dependency
```bash
$ npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
```
### Install webpack dependency
```bash
$ npm i -D webpack webpack-cli webpack-dev-server
```
### Babel Configuration
```js
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
// Specify your target environments here
browsers: ["last 2 versions", "ie >= 11"],
},
},
],
"@babel/preset-react"
],
};
```
### Webpack configuration with babel
```js
module.exports = {
mode: "development", // or "production"
module: {
rules: [
// if you want your code to be backwards compatible from older browser, you can use babel.
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
],
},
};
```
### Add script to execute webpack in the `package.json`
```json
"scripts": {
"dev" : "webpack --mode development"
}
```
### Run the build script
```bash
$ npm run dev
```
### What's next?
As 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.
### Install an HTML Webpack Plugin
```bash
$ npm i -D html-webpack-plugin
```
### Create a webpack config file
```js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: {
bundle: path.resolve(__dirname, "src/index.js"),
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js", // bundle.js
},
module: {
rules: [
// if you want your code to be backwards compatible from older browser, you can use babel.
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: babelConfig,
},
}
],
},
plugins: [
new HtmlWebpackPlugin({
title: "Hritik App",
filename: "index.html",
template: "public/index.html",
}),
],
}
```
### Move content of index.js to `components/app.js`
```jsx
import React from "react"
const HelloWorld = () => {
return (
Hello World
)
}
export default HelloWorld;
```
### Inside `index.js` file will mount a react component
```js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(, document.getElementById("app"));
```
### Create `index.html` inside public directory
```html
Hritik - App
```
### Add the scripts to start the development server inside `package.json`
`package.json`
```json
"scripts": {
"start" : "webpack-dev-server --mode development --open"
}
```
### Start the development server
```bash
$ npm run start
```
## Switching from babel to SWC 🚀
### Install a dependency
```bash
$ npm i -D @swc/core swc-loader
```
### Replace babel-loader with SWC loader inside a webpack config
```js
module: {
rules: [
// if you want your code to be backwards compatible from older browser, you can use babel.
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "swc-loader"
},
}
],
},
```
### Create `.swcrc` config
```js
jsc: {
parser: {
syntax: 'typescript', // Specify the syntax (jsx is automatically detected within TypeScript)
},
transform: {
react: {
pragma: 'React.createElement', // JSX pragma
pragmaFrag: 'React.Fragment', // Fragment pragma
throwIfNamespace: false, // Enable JSX fragment support
development: false, // Optimize for production
useBuiltins: true, // Use builtins for JSX transform
},
},
},
target: 'es5', // Transpile to ES5 syntax
```
### Start the development server, things will work as expected but now transpilation step will be faster with `SWC` as compared to `babel`
```bash
$ npm run start
```