Minimal setup for React app with Webpack as bundler

Hello There!

This is a post where I share the minimum set up for React application in development stage as it renders the application in the browser (client side), which in production I don't recommend doing this. It uses webpack for bundle the JS code and Babel for traspile it.

The files content is above, for make it simple I won't go in detail for every file.

Find the repo:
Github Repository

Summary

When we run the script npm run dev , which uses webpack-dev-server --mode development to start the process for server our application. Webpack will take the entry file to bundle it.

Webpack will use the index.js from entry property. If it is not declared, don't worry, it is the default value. Also, webpack uses a babel-loader for traspile the JS code. Babel requires a .babelrc file that stablish the presets, in this case "@babel/preset-env", "@babel/preset-react" , env is for general JS and preset-react for React code. Then, Webpack uses HtmlWebpackPlugin for attached the bundled JS content, so it could be render in the browser.

Create any React application code, that renders with React DOM.

Obviously I add .gitignore to remember everyone to not add node_modules directory to the repository.

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: './index.html',
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [htmlPlugin],
};

// scripts and dependencies need it

"scripts": {
  "dev": "webpack-dev-server --mode development"
},
"dependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1"
},
"devDependencies": {
  "@babel/core": "^7.11.6",
  "@babel/preset-env": "^7.11.5",
  "@babel/preset-react": "^7.10.4",
  "babel-loader": "^8.1.0",
  "html-webpack-plugin": "^4.4.1",
  "webpack": "^4.44.1",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
}

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>src</title>
  </head>
  <body>
    <section id="root"></section>
  </body>
</html>

// index.js

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<h1>React app</h1>, document.getElementById('root'));

.gitignore

/node_modules
/dist

Blog

Minimal setup for React app with Webpack as bundler

Emmanuel Galindo

Summary

Join Our Newsletter. No Spam, Only the good stuff.

Related