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": [
		"@babel/preset-env",
		"@babel/preset-react"
	]
}

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">
<head>
    <meta charset="utf-8">
    <title>How to set up React, Webpack, and Babel</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

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:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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