Build a React app with a fully custom Webpack config — Basic example to understand core concepts

Ever wondered why your React/Vue/Angular app needs a “build” step before it even runs? (Part 3/3)

Last post we talked about the 6 core concepts (entry, output, loaders, mode, plugins & devServer) of Webpack — Part(2/3).

In this post, we’ll put those 6 concepts to build a React app with a fully custom Webpack config, from an empty folder. (No CRA or Vite scaffolding)

Here’s the process:

1. Create a new directory

mkdir react-custom-build && cd react-custom-build

2. Initialize a Node.js project

npm init -y

3. Install runtime dependencies (ships in your bundle):

npm i react react-dom

and dev dependencies (only runs on your machine):

npm i -D webpack webpack-cli webpack-dev-server babel-loader 
@babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

4. Set up the folder structure src/App.jsx, src/index.jsx, public/index.html — a simple structure is enough to get this running.

At this point, your directory looks like:

📁 react-custom-build/
  📁 node_modules/
  📁 public/
    📄 index.html
  📁 src/
    📄 App.jsx
    📄 index.jsx
  📄 package.json
  📄 package-lock.json

Webpack configuration is what connects the “JSX files + scattered source folders” → transpiled → bundled → injected into HTML with a script tag pointing to the final emitted JS bundle. That entire pipeline is what we configure next.

Create “webpack.config.js” in the root. (Part 2/3 concepts applied here):

export default {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [
     new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
  mode: 'development',
  devServer: {
    port: 3000,
    hot: true,
  },
};

You also need to add a “.babelrc” file in the root directory:

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

Babel teaches Webpack to understand JSX, without it, <App /> is an invalid syntax to JS engine.

Altogether, your directory now looks like:

📁 react-custom-build/ 
  📁 node_modules/
  📁 public/
   📄 index.html
  📁 src/
    📄 App.jsx
    📄 index.jsx
  📄 .babelrc
  📄 webpack.config.js
  📄 package.json
  📄 package-lock.json

Finally, add scripts in package.json:

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

Run “npm start”, and your custom-built React app is live on port 3000 — no CRA, no Vite, no black box.

This is a minimal config to understand the core concepts. Real production setups usually add more (resolve.extensions, optimization.splitChunks, source maps, environment-specific configs, and more loaders for images/fonts/CSS). That’s a deeper rabbit hole for a separate blog.

Frontend #FrontendEngineering #WebDevelopment #JavaScript #React #Webpack #BuildTools