How to create a React application with Webpack

In this shot, we will learn how to create a React App with Webpack 5.

1. Create a folder and initialize NPM

npm init -y

2. Install the following packages

npm i react react-dom
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server

3. Create .babelrc file

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

4. Create a webpack.config.js file

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: 3030, // 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 },
},
],
},
};

5. Create an /src folder and create the following files inside it

|-- src
  |-- App.js
  |-- App.scss
  |-- index.html
  |-- index.js
import React from "react";
const App = () => {
return <h1>Hello React</h1>;
};
export default App;
h1 {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React with Webpack</title>
</head>
<body>
<div id="app"></div>
<!-- Notice we are pointing to `bundle.js` file -->
<script src="bundle.js"></script>
</body>
</html>
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./App.scss";
const el = document.getElementById("app");
ReactDOM.render(<App />, el);

6. Create serve and build scripts

In your package.json file, add the following:

{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"serve": "webpack serve --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"sass": "^1.38.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"url-loader": "^4.1.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
}
}

7. Run and modify your app

Run the app with npm run serve. Open your browser on http://localhost:3030/. Try to modify it and see the changes on the fly.

8. Build the app

Run npm run build in the terminal. You will see the following output:

|-- dist
  |-- bundle.js
  |-- bundle.js.LICENSE.txt
  |-- index.html

Finally, open the index.html file and you should see your app.

Attributions:
  1. undefined by undefined
  2. undefined by undefined