Photo by Ferenc Almasi on Unsplash
Cara Mudah Mengatur React dengan Webpack dan Babel
Panduan Sederhana Setting React dengan Webpack dan Babel
Berikut adalah cara setup React
dengan Webpack
dan Babel
.
Init project
Buat folder
baru lalu jalankan perintah berikut:
npm init -y
Install React dan React DOM
Untuk menginstal React
dan React DOM
jalankan perintah berikut:
npm install react react-dom
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
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
Konfigurasi folder dan file
Buat folder src
lalu didalamnya buat file index.html
, main.js
dan App.js
. Ini akan 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
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"
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>
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"));
Running server
Jalankan perintah berikut untuk menjalankan server:
npm run start
Selesai