Cara setup React dengan Webpack dan Babel

Berikut adalah cara setup React dengan Webpack dan Babel.

  1. Init project

    Buat folder baru lalu jalankan perintah berikut:
    $ npm init -y

  2. Install React dan React DOM

    Untuk meng-install React dan React DOM jalankan perintah berikut:
    $ npm install react react-dom

  3. Install Webpack

    Ada beberapa package yang harus di-install untuk menggunakan webpack.
    Jalankan perintah berikut untuk menginstallnya:
    $ npm install webpack webpack-cli webpack-dev-server --save-dev
    Install juga plugin untuk me-load html dengan menjalankan perintah berukut:
    npm install html-webpack-plugin --save-dev

  4. Install Babel

    Kita juga perlu meng-install babel sebagai compailer. Jalankan perintah berikut untuk menginstallnya:
    $ npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

  5. Konfigurasi folder dan file

    Buat folder src lalu didalamnya buat file index.html, main.js dan App.js. Ini kita gunakan sebagai entry point untuk setup webpack.
    Buat file webpack.config.js untuk konfigurasi webpack.
    Buat file .babelrc untuk konfigurasi babel.
    Jalankan perintah berikut untuk membuat file tersebut:
    $ mkdir src && touch src/index.html src/main.js src/App.js webpack.config.js .babelrc

  6. Konfigurasi webpack, babel dan package.json

    • Edit file webpack.config.js

        // webpack.config.js
        const path = require("path");
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        module.exports = {
        entry: "./src/main.js",
        output: {
        path: path.resolve(__dirname, "dist"),
        },
        module: {
        rules: [
        {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        },
        ],
        },
        plugins: [
        new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "src", "index.html"),
        }),
        ],
        };
      
    • Edit file .babelrc

        {
          "presets": ["@babel/preset-env", "@babel/preset-react"]
        }
      
    • Edit package.json lalu dibagian script tambahkan kode berikut:
      "start": "webpack serve"

  1. Template Webpack HTML untuk index.html

     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Hallo React</title>
       </head>
       <body>
         <div id="root"></div>
       </body>
     </html>
    
  2. Edit App.js dan main.js

    • App.js

        // src/App.js
        import React, { Component } from "react";
        export default class App extends Component {
        render() {
        return (
        <div>
        <h1>Hello World</h1>
        </div>
        );
        }
        }
      
    • main.js

        // src/main.js
        import React from "react";
        import ReactDOM from "react-dom";
        import App from "./App";
        ReactDOM.render(<App />, document.getElementById("root"));
      
  1. Running server

    Jalankan perintah berikut untuk menjalankan server:
    $ npm run start

  2. Selesai