Arpit Malik

Posted on Apr 22 • Edited on May 1

Creating a React app with Webpack

#webdev #react #webpack #javascript

Simple step by step walk through of setting up a React app with Webpack

Sometimes you want to get started with React but don’t want all the bloat of create-react-app or some other boilerplate. Here's a step by step walk through of how to set to setup React with just Webpack!

What the project will look like when it’s done

This guide will follow the conventions already established by create-react-app - e.g. build folder is called build, static assets are under public, etc.

At the end, this is the folder structure we’ll have


- build_utils
  - config
    - commonPaths.js
    - env.js
- public
  - index.html
- src
  - App.jsx
  - index.js
.babelrc
package.json
webpack.config.js

We’ll go step by step and check that everything works after every stage:

Basic scaffolding: create project folder and serve plain HTML
Add Webpack and bundle a simple JS file
Add Babel for ES6 support
Add React

Without further ado, let’s get started!

Step 1: Base scaffolding

First step is to create the project folder and add a plain html file.

To create the project and initialize the package.json, run these commands:


mkdir react-webpack
cd react-webpack
npm init -y

Then, add the main index html file - it usually sits in the public directory. So, let's do that:


mkdir public
touch public/index.html

Tip: You can open the project in VSCode by typing code . in the project folder and manually create the public folder from there

The index.html will just contain the base HTML5 boilerplate:


<!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,minimum-scale=1,user-scalable=no"
    />
    <meta
    httpEquiv="Cache-Control"
    content="no-cache, no-store, must-revalidate"
    />
    <title>React + Webpack</title>
  </head>
  <body>
    <h1>Hello React + Webpack!</h1>
  </body>
</html>

Tip: In VSCode, if you type html:5 and hit tab, VSCode will create the index.html contents for you!

Now let’s check it by just serving the HTML we just created with npm serve.


npx serve public

And it does! If you navigate to http://localhost:3000, you should see the html we just added.

Tip: If npx serve public fails for you with Must use import to load ES Module error, check your node version with the help of node -v and make sure you're using at least Node 16 (latest LTS).

Step 2: Adding Webpack

For this section, it’s best to just follow the latest official Webpack docs.

First, install Webpack:


npm install webpack webpack-cli --save-dev

Next, let's create a simple JS file that we can configure Webpack to bundle:


mkdir src
touch src/index.js

We can just create a div with a hello message and add it to the document:


const helloDiv = document.createElement("div");
helloDiv.innerHTML = "Hello from Javascript!";
document.body.append(helloDiv);

Then, we need to configure Webpack by creating a webpack.config.js file in the root of the project and commonPaths.js in build_utils/config:


// webpack.config.js

const path = require("path");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
};

// commonPaths.js

const path = require("path");

const PROJECT_ROOT = path.resolve(__dirname, "../../");

module.exports = {
  projectRootPath: PROJECT_ROOT,
  entryPath: path.join(PROJECT_ROOT, "src", "index.js"),
  outputPath: path.join(PROJECT_ROOT, "build"),
  appEntryPath: path.join(PROJECT_ROOT, "src"),
  buildUtilsPath: path.join(PROJECT_ROOT, "build_utils"),
};

Finally, in package.json, add a new build script:


"scripts": {
    "build": "webpack"
},

Now, let's try it out! After running npm run build, you should see a new folder was created, called build, with a main.js file in it!

Tip: Add the build folder to .gitignore to not commit it by accident. And if you haven't already, make sure to also ignore the node_modules folder.

Next, we need to move the static assets to the bundle. More specifically, we want to also include the index.html file in the build folder.

Easiest way to do this is with the HtmlWebpackPlugin.


npm install html-webpack-plugin --save-dev

And update the webpack.config.js file:


// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
    }),
  ],
};

This will copy the file under public/index.html, copy it to the build folder and inject a link to the bundled JS file (main.js).

Let’s try it out!


npm run build
npx serve build

And it works! You should now also see the message “Hello from Javascript” :D

Adding Webpack dev server

So far, it was ok to just use npx serve to check our app works. But in real life, it's easier to just use the webpack-dev-server, so let's add that as well.


npm install --save-dev webpack-dev-server

Then, configure it in the Webpack config:


// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

const port = process.env.PORT || 3000;

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {
    port: port,
    static: {
      directory: commonPaths.outputPath,
    },
    historyApiFallback: {
      index: "index.html",
    },
    webSocketServer: false,
  },
};

And, then add npm run start script to package.json and while we're there, pass in the right --mode:


{
  // ...,
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --mode development"
  }
}

Finally, check that it works: run npm run start, open http://localhost:3000 and check the app still works as before.

Step 3: Adding Babel

This is useful for allowing us to use all ES6 features and having them transpiled down to JS versions that all browsers can understand. (If you want to learn more about what Babel preset-env is and why it's useful, the article by Jacob Lind is a great overview).

First, let’s install the required packages:


npm i @babel/core @babel/preset-env babel-loader --save-dev

Next, update the Webpack config to tell it to pass the files through Babel when bundling:


// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

const port = process.env.PORT || 3000;

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {
    port: port,
    static: {
      directory: commonPaths.outputPath,
    },
    historyApiFallback: {
      index: "index.html",
    },
    webSocketServer: false,
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/, // exclude node_modules
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js"],
  },
};

Then, create the Babel config file — .babelrc. This is where we configure Babel to apply the preset-env transform.


// .babelrc

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

Optionally, update the index.js to contain some ES6 features that wouldn't work without Babel 😀 (actually they do work in most browsers, but for example IE still doesn't support Array.fill).


// Use a feature that needs Babel to work in all browsers :)
// arrow functions + Array fill

const sayHelloManyTimes = (times) =>
  new Array(times).fill(1).map((_, i) => `Hello ${i + 1}`);

const helloDiv = document.createElement("div");
helloDiv.innerHTML = sayHelloManyTimes(10).join("<br/>");
document.body.append(helloDiv);

Finally, let’s check everything works — run npm run start and check the app correctly runs:

Step 4: Add React

Finally, we can add React 😅

First, install it:


npm i react react-dom --save
npm i @babel/preset-react --save-dev

Then, update the .babelrc file to also apply the preset-react transform. This is needed, among other things, to support JSX.


// .babelrc

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

Tip: Specifying the preset-react runtime as automatic enables a feature that no longer requires importing React on top of every file.

Also, we need to update the Webpack config to pass jsx files through Babel as well:


// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

const port = process.env.PORT || 3000;

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {
    port: port,
    static: {
      directory: commonPaths.outputPath,
    },
    historyApiFallback: {
      index: "index.html",
    },
    webSocketServer: false,
  },
   module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/, // exclude node_modules
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
};

Next, let’s create a React component, so we can check that everything works:


// src/App.jsx

const App = () => <h1>Hello from React!</h1>;

export default App;

And add it to the main app file:


// index.js

import { createRoot } from "react-dom/client";

import App from "./App.jsx";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

Note we’re using the new React 18 syntax with createRoot.

Finally, we also update the index.html to provide a "root" node for the app:


<!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,minimum-scale=1,user-scalable=no"
    />
    <meta
    httpEquiv="Cache-Control"
    content="no-cache, no-store, must-revalidate"
    />
    <title>React + Webpack</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Let’s check that it works — run npm run start and you should see "Hello from React!":

Also, check there are no errors in the console.

You can also check that the app correctly runs in production, by running npm run build and then npx serve build.

That’s it!

DEV Community

Creating a React app with Webpack

Top comments (0)

Read next

The Art of Lazy Loading: Speeding Up JavaScript Applications

Building simple event-driven applications with Pub/Sub

Task manger app

The 5 modern CSS tricks that you should know