Babel is actually a platform for compiling JavaScript, which compiles code to help you achieve the following goals:

• Let you use the latest JavaScript code (ES6, ES7...) It doesn't matter whether the new standard is fully supported by the browsers currently in use.
  
  

Next, learn how to install Babel

Babel is actually several modular packages. Its core function is located in the npm package called babel-core. Web packages can integrate different packages. For each function or extension you need, you need to install separate packages (the most used are the babel-env-press package for Es6 and the babel-press-react package for JSX).

Let's install these dependency packages at once.

// npm installs multiple dependent modules at one time, separated by spaces between modules
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

The way to configure Babel in webpack is as follows:

module.exports = {
    entry: __dirname + "/app/main.js",//The only entry file that has been mentioned many times
    output: {
        path: __dirname + "/public",//Where to store packaged documents
        filename: "bundle.js"//File name of the packaged output file
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//The directory where the pages loaded by the local server are located
        historyApiFallback: true,//not taken
        inline: true//Real time refresh
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

Now your web pack configuration allows you to use ES6 and JSX syntax. Continue with the above example, but this time we will use React, remember to install React and React-DOM first.

npm install --save react react-dom

Next we update Greeter.js and return a React component using ES6 syntax

//Greeter,js
import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      <div>
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

Modify main.js as follows, using ES6 module definition and rendering Greeter module

// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

Reuse npm start packaging. If the previously opened local server is not shut down, you should see the same content under localhost:8080, which means react and es6 are packaged properly.

Babel configuration

Babel can actually be configured entirely in webpack.config.js, but considering that Babel has many configuration options, configuring in a single webpack.config.js file often makes this file too complex, so some developers support placing babel's configuration options in a single configuration file called ". babel". Our current Babel configuration is not complicated, but we will add something later, so now we extract the relevant part and configure it in two configuration files (webpack will automatically call the Babel configuration option in. babelrc). Here is the following:

module.exports = {
    entry: __dirname + "/app/main.js",//The only entry file that has been mentioned many times
    output: {
        path: __dirname + "/public",//Where to store packaged documents
        filename: "bundle.js"//File name of the packaged output file
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//The directory where the pages loaded by the local server are located
        historyApiFallback: true,//not taken
        inline: true//Real time refresh
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

So far, the installation and configuration of Babel is basically complete.