DEV Community

Cover image for Creating React Application with Webpack.
YoussefZidan
YoussefZidan

Posted on

Creating React Application with Webpack.

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. Creating /src folder

- 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. Creating 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

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.

Follow me on


LinkedIn

Discussion (0)