DEV Community

Cover image for Creating React Application with Webpack.
Youssef Zidan
Youssef Zidan

Posted on • Edited on

Creating React Application with Webpack.

#react #webpack #javascript #babel

Creating React Application with Webpack.

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

1. Create a folder and initialize NPM 

npm init -y
Enter fullscreen mode Exit fullscreen mode

2. Install the following packages 

npm i react react-dom
Enter fullscreen mode Exit fullscreen mode 
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
Enter fullscreen mode Exit fullscreen mode

3. Create .babelrc file

.babelrc

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
Enter fullscreen mode Exit fullscreen mode

4. Create webpack.config.js file

webpack.config.js

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 }, }, ], }, };
Enter fullscreen mode Exit fullscreen mode

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

|-- src |-- App.js |-- App.scss |-- index.html |-- index.js
Enter fullscreen mode Exit fullscreen mode

App.js

import React from "react"; const App = () => { return <h1>Hello React</h1>; }; export default App;
Enter fullscreen mode Exit fullscreen mode

App.scss

h1 { color: red; }
Enter fullscreen mode Exit fullscreen mode

index.html

<!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>
Enter fullscreen mode Exit fullscreen mode

index.js

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);
Enter fullscreen mode Exit fullscreen mode

6. Create Serve and Build Scripts

In your package.json file add the following

 //.... "scripts": { "serve": "webpack serve --mode development", "build": "webpack --mode production" }, //....
Enter fullscreen mode Exit fullscreen mode

7. Run and modify your App

Run the app with npm run serve.
Open your browser on http://localhost:3030/
Try to modify 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
Enter fullscreen mode Exit fullscreen mode

Now open index.html file and you should see your App.


LinkedIn

Top comments (0)