Configure Webpack and Babel 7 for React

Tram Ho

As we all know nowadays working with React mostly uses create-react-app , a great tool that helps us to just focus on React without having to worry about how they’re configured. . After learning React for a while, I think you will have some questions about that. So today we will learn about Webpack and Babel 7 configuration for React.

First, let’s learn about Webpack and Babel !

👉 Webpack

Webpack is a packaging module that helps us to package our project into a file. It requires a webpack.config.js config file located in the root directory of the project, where we will tell webpack how to work with our project by providing input and output information.

entry is where our application will start and output is the output. In the output we must provide a relative path – where it was created and the name of the file.

👉 Babel

Babel is a Javascript compiler. Actually it’s not a function, it won’t compile anything by default, instead we will provide plugins and preset so that it can add features in your language. You can visit Babel ‘s home page to view its doc . On the babel website you will easily find Try It Out , click on it to see a window like this

In the left column where you will write the code and the right column you will see the code after babel compiles, now let’s write some JSX in the left column.

In the right column, you will see the JavaScript code that is more explicit, easier to understand, and your browser will read this code. On the left side you see several PRESETS options of which some are highlighted. If you uncheck this option now, you’ll see an error caused by this react-preset which is responsible for converting our JSX syntax to JavaScript code.

In this article we will use two presets:

  1. babel / preset-env: Help babel convert ES6, ES7 and ES8 code into ES5.
  2. babel / preset-react: Helps convert JSX to Javascript code.

Now that we have a rough profile of webpack and babel , let’s go configure your React app.

  • Create directories with the command below

We just added the index.html file to public . Now add the following html code

  • Initialize the project with

  • Install Webpack and Babel

We have webpack-cli installed so we can use webpack in the command line. We already know we will need the webpack configuration file in the root directory, create the webpack.config.js file with the code.

Next, add the webpack command in the package.json file

There will be 2 modes, develop and production . In production the output file will be optimized for best performance in production environments

  • Install React

Now import react into the app.js file and add the following lines of code

Now run npm start command line in terminal and open index.html file in your browser.

Your app is working properly, but you will wonder why not use JSX. Let’s try adding JSX to the app.js nka file

Now run the command npm start

Our app will have an error, because we use JSX and Javacript does not support JSX, so we need to compile JSX into Javascript, it’s time to use babel

  • Install and configure babel

We already know about @babel/preset-env @babel/preset-react

babel / core: Lets run babel tool like webpack

babel-loader: Is a plugin. It tells webpack how to run babel when webpack sees certain files.

Create config .babelrc file to root directory

This file will declare preset so that babel can compile.

Now we add the following code to the webpack.config.js file

  • Install Dev Server:

Add the following code to the webpack.config.js file

Add the webpack-dev-server command to package.json

Let’s start

  • Load styles for the App

Add css code to styles.css file

To load css you need to add new rules in webpack.config.js . Some loaders support css reading

css-loader: Allows webpack to load css files

style-loader: Read the css and add the <style> tag

Now add new rules to webpack.config.js

Import styles.css file into app.js and run run dev-server to see css changes.

Now that we have Webpack and Babel configured for React, you can create your own React project. The article still has many shortcomings, thank you for taking the time to read this article

The article is available at: Setup Webpack and Babel for React

Share the news now

Source : Viblo