Skip to content

Commit ede32e3

Browse files
deepumandaldeepumandal
committed
2 parents e4adaa0 + 1876dea commit ede32e3

File tree

1 file changed

+202
-0
lines changed

1 file changed

+202
-0
lines changed

‎README.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,203 @@
11
# react-webpack-configuration
2+
3+
This repository provides a basic setup for a React project using webpack.
4+
5+
## Installation
6+
7+
1. Create a new folder:
8+
9+
```bash
10+
npm install my-project
11+
cd my-project
12+
```
13+
14+
15+
2. Initialize a new npm project:
16+
```bash
17+
yarn init -y
18+
```
19+
20+
3. Install the dependencies using yarn or npm
21+
22+
```bash
23+
"@babel/core": "^7.22.5",
24+
"@babel/preset-env": "^7.22.5",
25+
"@babel/preset-react": "^7.22.5",
26+
"@babel/preset-typescript": "^7.22.5",
27+
"@types/react": "^18.2.13",
28+
"@types/react-dom": "^18.2.6",
29+
"babel-loader": "^9.1.2",
30+
"css-loader": "^6.8.1",
31+
"dotenv": "^16.3.1",
32+
"html-webpack-plugin": "^5.5.3",
33+
"process": "^0.11.10",
34+
"react": "^18.2.0",
35+
"react-dom": "^18.2.0",
36+
"style-loader": "^3.3.3",
37+
"ts-loader": "^9.4.3",
38+
"typescript": "^5.1.3",
39+
"webpack": "^5.88.0",
40+
"webpack-cli": "^5.1.4",
41+
"webpack-dev-server": "^4.15.1"
42+
```
43+
44+
45+
4. Generate a TypeScript configuration file:
46+
```bash
47+
tsc --init
48+
```
49+
50+
51+
5. Open the `tsconfig.json` file and uncomment the line
52+
```bash
53+
"jsx": "preserve"
54+
```
55+
56+
6. Create a new folder named `src` inside the my-project.
57+
58+
7. Create an `index.html` file inside the `src` folder and paste the following code:
59+
```html
60+
<!DOCTYPE html>
61+
<html lang="en">
62+
<head>
63+
<meta charset="UTF-8" />
64+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
65+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66+
<title>Document</title>
67+
</head>
68+
<body>
69+
<div id="root"></div>
70+
</body>
71+
</html>
72+
```
73+
74+
8. Create an ```index.css``` file inside the src folder.
75+
76+
9. Create an ```index.tsx``` file inside the src folder and paste the following code:
77+
```html
78+
import React from "react";
79+
import ReactDOM from "react-dom";
80+
import App from "./App";
81+
import "./index.css";
82+
83+
ReactDOM.render(<App />, document.getElementById("root"));
84+
85+
```
86+
87+
10. Create an```App.tsx``` file inside the src folder and paste the following code:
88+
```html
89+
import React from 'react'
90+
91+
const App: React.FC = () => {
92+
return (
93+
<div>App</div>
94+
)
95+
}
96+
97+
export default App
98+
```
99+
100+
11. Create a webpack.config.js file in the main folder and paste the following code:
101+
102+
```html
103+
const path = require("path");
104+
const htmlWebpackPlugin = require("html-webpack-plugin");
105+
const webpack = require("webpack");
106+
107+
// dotenv configuration settings
108+
const dotenv = require("dotenv").config({ path: __dirname + "/.env" });
109+
const isProduction = process.env.NODE_ENV === "production";
110+
module.exports = {
111+
resolve: {
112+
extensions: [".js", ".jsx", ".ts", ".tsx"],
113+
},
114+
entry: "./src/index.tsx",
115+
output: {
116+
path: path.resolve(__dirname, "dist"),
117+
},
118+
plugins: [
119+
new htmlWebpackPlugin({
120+
template: "./src/index.html",
121+
}),
122+
new webpack.ProvidePlugin({
123+
process: "process/browser",
124+
}),
125+
new webpack.DefinePlugin({
126+
"process.env": JSON.stringify({
127+
...dotenv.parsed,
128+
NODE_ENV: JSON.stringify(isProduction ? "production" : "development"),
129+
}),
130+
}),
131+
],
132+
module: {
133+
rules: [
134+
{
135+
test: /.(js|jsx|ts|tsx)$/,
136+
exclude: /node_modules/,
137+
use: {
138+
loader: "babel-loader",
139+
options: {
140+
presets: [
141+
"@babel/preset-env",
142+
"@babel/preset-react",
143+
"@babel/preset-typescript",
144+
],
145+
},
146+
},
147+
},
148+
{
149+
test: /\.css$/,
150+
use: ["style-loader", "css-loader"],
151+
},
152+
],
153+
},
154+
devServer: {
155+
port: 7000,
156+
open: true,
157+
hot: true,
158+
},
159+
};
160+
```
161+
12. modify package.json
162+
``` html
163+
{
164+
"name": "my-project",
165+
"version": "1.0.0",
166+
"main": "index.js",
167+
"license": "MIT",
168+
"scripts": {
169+
"start": "webpack-dev-server --mode development --open --hot",
170+
"build": "webpack --mode production"
171+
},
172+
"dependencies": {
173+
"@babel/core": "^7.22.5",
174+
"@babel/preset-env": "^7.22.5",
175+
"@babel/preset-react": "^7.22.5",
176+
"@babel/preset-typescript": "^7.22.5",
177+
"@chakra-ui/react": "^2.7.1",
178+
"@emotion/styled": "^11.11.0",
179+
"@types/react": "^18.2.13",
180+
"@types/react-dom": "^18.2.6",
181+
"@types/react-router-dom": "^5.3.3",
182+
"babel-loader": "^9.1.2",
183+
"css-loader": "^6.8.1",
184+
"dotenv": "^16.3.1",
185+
"framer-motion": "^10.12.16",
186+
"html-webpack-plugin": "^5.5.3",
187+
"process": "^0.11.10",
188+
"react": "^18.2.0",
189+
"react-dom": "^18.2.0",
190+
"react-router-dom": "^6.13.0",
191+
"style-loader": "^3.3.3",
192+
"ts-loader": "^9.4.3",
193+
"typescript": "^5.1.3",
194+
"webpack": "^5.88.0",
195+
"webpack-cli": "^5.1.4",
196+
"webpack-dev-server": "^4.15.1"
197+
}
198+
}
199+
```
200+
201+
## Authors
202+
203+
- [@deepumandal](https://www.github.com/deepumandal)

0 commit comments

Comments
 (0)