How to create React App with Webpack

In this tutorial we will create a React App from scratch with webpack, we wont be using the create-react-app command, we will go through each and every step required for setting up react app with webpack, babel and other npm modules.

Below is the set up before starting this tutorial

  • Operating System : Windows 10
  • VS Code IDE
  • Node Version : v12.13.0
  • NPM Version : 6.12.0

Following are the steps for creating a react app

  • Create a folder with name "my_app" on desktop
  • In vscode open "my_app" folder, "File-->Open Folder-->my_app"
  • In vscode open New Terminal, "Terminal-->New Terminal"
  • Rum npm init in terminal and provide below details
  • 
    npm init
    
    
    
    package name: (my_app) my_app
    version: (1.0.0) 1.0.0
    description: React app with webpack
    entry point: (index.js) index.js
    test command: none
    git repository: none
    keywords: none
    author: gcptutorials
    license: (ISC) ISC
    About to write to C:\Users\gcptutorials\Desktop\my_app\package.json:
    
    {
      "name": "my_app",
      "version": "1.0.0",
      "description": "React app with webpack",
      "main": "index.js",
      "scripts": {
        "test": "none"
      },
      "repository": {
        "type": "git",
        "url": "none"
      },
      "keywords": [
        "none"
      ],
      "author": "gcptutorials",
      "license": "ISC"
    }
    
    
    Is this OK? (yes) yes
    
    

  • Install react and react-dom packages
  • 
    npm install react react-dom
    
    

  • Install babel packages as dev dependency
  • 
    npm install --save-dev babel-core [email protected] babel-preset-env babel-preset-react
    
    

  • Install webpack packages as dev dependency
  • 
    npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
    
    

    Now we have our packages installed, lets set up project structure

    • Inside root directory that is "my_App", create folder with name "src"
    • Inside "src" create two files "index.js" and "index.html"
    • Inside "src" create a folder with name "components"
    • Inside "components" create a file "App.js"
    • Inside root directory that is "my_App", create a file ".babelrc"
    • Inside root directory that is "my_App" , create a file "webpack.config.js"

    By now we should be having directory structure as shown below

    dir-structure

    As now we are having our directory structure ready, lets set up the app

    Write below content in file ".babelrc"

    
    {
        "presets":["env", "react"]
    }
    
    
    

    Write below code in file "webpack.config.js"

    
    const path = require("path");
    const HtmlWebPlugin = require("html-webpack-plugin");
    
    module.exports = {
      entry: "./src/index.js",
      output: {
        path: path.join(__dirname, "dist"),
        filename: "main.js",
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            use: "babel-loader",
          },
        ],
      },
      plugins: [new HtmlWebPlugin({ template: "./src/index.html" })],
    };
    
    
    

    Write below code in file "index.html"

    
    <!DOCTYPE html>
    <html>
        <head>
            <title>Example</title>
        </head>
        <body>
            <div id='root'></div>
        </body>
    </html>
    
    
    
    

    Write below code in file "index.js"

    
    import React from 'react';
    import ReactDom from 'react-dom'
    
    import App from './components/App'
    
    ReactDom.render(<App />, document.getElementById('root'))
    
    

    Write below code in file "App.js"

    
    import React, { Component } from 'react';
    
    class App extends Component {
        render()
             {
                 return(
                     <div>
                         <h2> My First app from scratch with webpack and React</h2>
                     </div>
                 )
             }
    
    }
    export default App;
    
    

    Finally in file "package.json" in "scripts" section add below line

    
    "start" : "webpack-dev-server --mode development --hot"
    
    

    Execute below command in terminal

    
    npm start
    
    

    Open "http://localhost:8080" in browser, you should see app running

    Categories: WebDev