Setting up React@17 with webpack and Babel (Part 1)

This is Part 1 of 2 stories to setup a React project from scratch using Webpack and Babel and deploying to Netlify. We will be using React 17 version.

Abhirup Datta

4 min readNov 21, 2020

Part 1(this one) will be setting up and create a basic Hello World app.

Create a directory for the project

mkdir react17-webpack-setup && cd $_

Create a src directory inside the folder

mkdir src

Initialize the project

npm init -y

Optionally, you can also add description and private keys in the generated package.json file.
“description”: “Starter React 17 with webpack”,
“private”: “true”,

We need to install webpack and webpack-cli as a development dependency(because we won’t be needing them in production).

npm install webpack webpack-cli --save-dev

webpack-cli provide us flexibilty to pass webpack configuration in command line.

Integrating Babel

Generally when writing React application we will be using ES6+ features (for e.g: class,destructuring). In order to provide compatibilty for old browsers to understand them we need Babel to transpile them to ES5 code.

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

@babel/core : babel core compiler
@babel/preset-env : for using latest javascript without any syntax transform
@babel/preset-react: for compiling JSX syntax to javascript
babel-loader: babel loader for webpack

Next, let’s configure Babel. Create a file named .babelrc in the project root folder with the following code:

Next, setup a minimal webpack config file named webpack.config.js with with the following code:

This tells webpack to transpile javascript files (excluding node_modules ) using Babel.

Now we are ready to write some React code. ⚛

Installing React

npm install react react-dom --save-dev

From React17 version it is optional to import React from ‘react’.You can know more here . This is already taken care in the .babelrc file by the “runtime”: “automatic” option.(For earlier React version this is not needed).

The HTML webpack plugin

html-webpack-plugin plugin is used to generate a html file and hook it up with our index.js file. Along with it html loader is used to export html as string to be read by webpack.

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

Setting up the js/jsx files

We include two files index.js and app.jsx to our src folder. This is similar to the Create-React-App template.

dev server and production build

For development we can set up a dev server which will automatically reload our changes on file save.
For production ,we will be good with minified code and no need for source maps. So we will be using two webpack config files with almost similar code. webpack.config.js for development and webpack.config.prod.js for production. In development we may need the source maps for debugging so we have the devtool key in webpack.config.js and mode to development.And for production , we have set mode to production.
npm install webpack-dev-server --save-dev

Include the following changes to package.json :

"scripts": {
  "start": "webpack serve --port 8080 --config webpack.config.js",
  "build": "webpack --config webpack.config.prod.js --mode=production"
}

In webpack.config.js