React From Scratch: React 16.7 + Webpack 4 + Babel 7 Tutorial
Facebook made it pretty easy to get started making a project in React with create-react-app. In fact they explicitly say:
You don’t need to install or configure tools like Webpack or Babel.
But what if you want to learn how to configure Webpack and Babel? This tutorial aims to demistify Webpack 4 and Babel 7 to give you the flexibility to configure these tools exactly how you want. We'll go step-by-step from creating the initial index.js to having a complete working setup for React.
Table of Contents
- Basic Webpack Setup
- React, Babel, and Webpack Setup
html-webpack-pluginfor Script Injection
- Enabling Hot Module Reloading
Basic Webpack Setup
To get started, create the project folder and initialize the project.
After that initial setup, you want to have a package.json that looks pretty similar to:
Create a Basic Project Structure
Here we're putting the index.js inside the src folder since that's where Webpack will initially be looking for it. First, create the folder and index.js file with:
Bringing in Webpack
Getting Webpack setup is as straightforward as looking through the docs. The Webpack getting started page shows you the exact what modules you need to install. But to make it clear it's as simple as:
After adding Webpack to the
devDependencies section, there are a couple more setup steps. First, add a
scripts object to the package.json file.
We also want to do some clean up and remove the
main: index.js field in the package.json file. Your final output should look like:
Basic Webpack Config Setup
If you're working extensively with Webpack, typically you'll use a webpack.config.js file to manage your configuration details. To get started, create a new config file using:
From there, add some basic config details:
For this config file, there are a few basic pieces to understand:
- The mode determines what Webpack will optimize for. It defaults to
production, but it can also be
- The entry point is the filepath (or paths) that Webpack starts bundling from
- output is exactly what it sounds like. Here it is an object containing a filepath for where the final bundle will end up, and also the filename for the actual bundle.
To test it out, run
yarn build or
npm run build to build your final bundle.
React, Babel, and Webpack Setup
In this section, we'll create a simple React application and configure Webpack and Babel until we get it to build.
Setup Basic Babel Config
To get started, add a few libraries:
@babel/coreis the Babel 7 library that does most of the compilation heavy-lifting
@babel/preset-envis a preset that determines the appropriate transforms to apply
From there a .babelrc file can be used to handle the Babel configurations. Create the file using:
This is where
@babel/preset-env is included:
We also need to update webpack.config.js to use
Setup Babel for React
We're almost ready to start building with React! First we'll have to install the React libraries
react-dom. Then we can add in
@babel/preset-react to make sure React can transpile the way it needs to.
@babel/preset-react preset to the .babelrc file
Creating a Simple React App
Now that all the setup necessary to get a React project up and running has been taken care of, we can go ahead and add the rest of the files for a simple project:
I'm adding index.html to the public folder since that is a common convention that tells other developers this folder won't be modified by Webpack. Inside of the file I added some basic HTML5 boilerplate.
Inside the body is a
<div id="root"></div> that React will use to mount the file. I also added a hardcoded link to
That's it! Run
yarn build or
npm run build to make sure you're not getting any errors. If everything is working fine, open index.html in your browser and you should see something like:
html-webpack-plugin for Script Injection
You may have realized that hardcoding a script tag into the app isn't the best way to connect it to the index.html file. If we change the name or the path of the compiled bundle from the build step, or if you decide to add in more build files, you will constantly have to update the script tag. To solve this issue,
html-webpack-plugin dynamically injects output bundle into index.html. It also has a ton of other cool features you should check out in the docs.
To install the library use:
The Github page for the library has an example that I took and modified so that we can inject our bundle into an existing index.html file.
Enabling Hot Module Reloading
There are several ways to enable hot module reloading with Webpack, but one of the most common ways is through the use of
webpack-dev-server. This library is packed with tons of features like hot module reloading, more descriptive error messages, and a network accessible server that allows you to test your apps on any device on the same network.
To get it set up, first install the library using:
We can then add a start script to the package.json so we can run
yarn start or
npm run start to get everything up and running with:
--open flag automatically opens the page in your browser. From here you can run
yarn start or
npm run start to start the server based on the default configuration. If you want to modify it you can add
devServer object to your webpack.config.js. This will allow you to fine tune the server to behave in a way that's best for you. An example object is:
My final config looks like:
This tutorial was meant to introduce you to some of what's possible to get going in webpack. There is a ton of opportunity to extend the base configuration to include styling and more custom optimization. I'd encourage you to play around with some of the links mentioned earlier in the documentation to see just how flexible webpack can be.