Wed Dec 2019 1 year ago

Tutorial Webpack 4 dan Menggunakan ReactJs

Hi, webpackers ?

Hemm, hari ini saya ingin membagikan cara menggunakan webpack versi 4 (terbaru) pada ReactJs. Kalian mungkin sebagai pemula pada ReactJs akan lebih memilih membuat aplikasi ReactJs menggunakan boilerplate create-react-app. Benar, tidak ?

Termasuk saya sendiri lebih memilih menggunakan create-react-app untuk belajar membuat aplikasi ReactJs. Alasannya adalah karena lebih mudah dengan tidak perlu mengkonfigurasi webpack.

Kenapa tidak belajar mengkonfigurasi webpack sendiri ?

So, pada kesempatan ini mari belajar mengkonfigurasi webpack untuk aplikasi ReactJs kita. Apa yang akan kita pelajari di sini hanya sebatas dasarnya saja.

Catatan: pastikan pada komputermu sudah diinstall Nodejs dan npm

Membuat Folder Projek

Buatlah folder projek kita dengan nama webpack-reactjs

Inisialisasi Projek

Inisialisasi projek kita dengan mengetikkan npm init -y pada terminal atau CMD

Install Dependensi

Berikut ini merupakan dependensi atau modul yang dibutuhkan oleh projek kita :

  • React
  • React DOM
  • Webpack
  • Webpack CLI
  • Webpack Dev Server
  • Babel Core
  • Babel Preset Env
  • Babel Preset React
  • Babel Loader
  • Html Webpack Plugin
  • Mini CSS Extract Plugin

Mari kita pahami satu persatu apa kegunaan dari library / modul di atas :

  • React
    React adalah sebuah library yang mengandung source code untuk komponen, state, props dan semua kode yang bereaksi.
  • React DOM
    Library react-dom seperti namanya adalah perekat antara React dan DOM (Document Object Model). Seringkali, Anda hanya akan menggunakannya untuk satu hal: memasang aplikasi Anda ke file index.html dengan ReactDOM.render().
  • Webpack
    Webpack adalah sebuah bundel modul JavaScript yang open source. Tujuan utamanya adalah untuk menggabungkan file-file JavaScript sehingga dapat digunakan dalam browser, namun ia juga mampu mengubah, menggabungkan, atau mengemas hampir semua sumber daya atau aset apa pun. Webpack mengambil modul dengan dependensi dan menghasilkan aset statis yang mewakili modul-modul tersebut.
  • Webpack CLI
    Alat untuk menjalankan perintah webpack dari terminal atau CMD.
  • Webpack Dev Server
    Webpack-dev-server adalah server Node.js Express kecil, yang menggunakan webpack-dev-middleware untuk melayani paket webpack. Ini juga memiliki sedikit waktu proses yang terhubung ke server melalui Sock.js. Server memberikan informasi tentang status kompilasi ke klien, yang bereaksi terhadap peristiwa tersebut
  • Babel Core
    Babel adalah modul utama dari Babel yang berfungsi untuk mengubah syntax JavaScript terbaru (ES6) ke vanila JavaScript (ES5).
  • Babel Preset Env
    Babel preset env adalah preset pintar yang memungkinkan Anda untuk menggunakan JavaScript terbaru tanpa perlu mikromanage yang mengubah sintaks (dan opsional, browser polyfills) yang dibutuhkan oleh lingkungan target Anda. Ini membuat hidup Anda lebih mudah dan bundle JavaScript menjadi lebih kecil!
  • Babel Preset React
    Modul ini berguna untuk mengubah source code JSX ke vanila JavaScript.
  • Babel Loader
    Modul ini memungkinkan pemindahan file JavaScript menggunakan Babel dan webpack.
  • Html Webpack Plugin
    HtmlWebpackPlugin menyederhanakan pembuatan file HTML untuk melayani bundel webpack Anda.
  • Mini Css Extract Plugin
    Plugin ini mengekstrak CSS ke dalam file terpisah. Ini menciptakan file CSS dari setiap file JS yang berisi CSS. Mendukung On-Demand-Loading dari CSS dan SourceMaps.
## dependensi production
npm install react react-dom --save## dependensi development
npm install webpack webpack-cli webpack-dev-server babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin mini-css-extract-plugin --save-dev

Setelah menginstall dependensi di atas melalui CMD atau terminal, maka isi file package.json kita akan seperti berikut :

{
  "name": "webpack-reactjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.1",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

Selanjutnya ubah perintah scripts pada object konfigurasi di atas dari

"scripts": {
  "test": "echo\"Error: no test specified\" && exit 1"
}

menjadi

"scripts": {
  "dev": "webpack-dev-server --mode development --open",
  "prod": "webpack --mode production"
}

Membuat entry file webpack. Pada webpack 4, secara default entry file berada pada ./src/index.js. Oleh sebab itu, mari kita buat sebuah folder src dan file dengan nama index.js di dalamnya.

import React from 'react';
import ReactDOM from 'react-dom';
import style from "./App.css";

const App = () => {
    return (
        <div>
            <h2>Belajar Penggunaan Webpack 4 pada ReactJs</h2>
        </div>
    );
};

ReactDOM.render(
    <App />,
    document.getElementById("app")
);

Masih pada folder src, buatlah sebuah file css dengan nama App.css.

.container {
    height: 100%;
    width: 100%;
    background-color: aquamarine;
}

Selanjutnya, kita akan membuat sebuah file index.html sebagai template untuk menampung component ReactJs dan asset statik (css). Jangan salah. Buat file ini pada folder src.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Belajar Penggunaan Webpack 4 pada ReactJs</title>
    </head>
    <body class="container">
        <div id="app"></div>
    </body>
</html>

Ada satu hal lagi yang belum kita buat. File konfigurasi webpack. Buatlah file tersebut dengan nama webpack.config.js pada root folder atau di luar folder src.

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
};

Konfigurasi Entry dan Output-nya ada di mana ?

Pertanyaan yang bagus. Jadi sekarang webpack 4 telah mempunyai default entry path, yaitu : ./src/index.js. Demikian juga dengan default output path pun telah ada, yaitu: ./dist/main.js.

Html-Webpack-Plugin akan membuat file index.html pada folder dist berdasarkan file template. Selain itu, plugin ini juga akan memasukkan script komponen ReactJs beserta dependensinya pada file index.html setelah proses build webpack.

Mini-Css-Extract-Plugin akan memisahkan CSS dari file bundle ke file berbeda dengan nama main.css kemudian memasukkannya ke file index.html. Hal ini penting untuk HTML agar dapat membaca style yang ada.

Dan jangan lupa membuat file .babelrc pada root folder Anda. Isinya sebagai berikut.

{
   "presets": ["env", "react"]
}

Kegunaan dari file ini adalah untuk menginstruksikan babel agar me-reset setiap sintaks ES6+ dan JSX yang kita gunakan ke vanilla JavaScript (javascript versi ES5).

Terimakasih banyak bro @fauzi_70574 sudah mengingatkan tentang konfigurasi ini di kolom komentar.

Beginilah susunan folder projek kita saat ini

webpack-reactjs
   -node_modules
   -src
    ---App.css
    ---index.html
    ---index.js
   -babelrc
   -package.json
   -webpack.config.js

Selanjutnya jalankan aplikasi yang telah kita buat dengan perintah berikut

npm run dev

Jangan lupa untuk menjalankannya dari root folder atau dari webpack-reactjs. Perintah di atas akan menjalankan server development webpack dan membuka aplikasi kita pada browser secara otomatis.

react js webpack