How to setup React, webpack, and Babel

Install webpack

yarn add webpack webpack-cli -D 

Update package.json

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --open --mode development"

Install babel

yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react -D

Config .babelrc

	"presets": [

Create webpack.config.js

module.exports = {
  module: {
    rules: [
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"

Create index.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>How to set up React, Webpack, and Babel</title>
<div id="container"></div>

Web pack dev-server

yarn add webpack-dev-server -D
yarn add html-webpack-plugin html-loader -D

Start it

yarn start

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s