22 Mar 2022 13:15
Dipost oleh Admin
1.383
0
Sobatcoding.com - Tentang Webpack dan Tutorial Cara Menggunakan Webpack dengan Node JS
Webpack (https://webpack.js.org/) merupakan sebuah module bundler JavaScript modern yang digunakan untuk membungkus module/dependency/library/assets menjadi satu paket file berekstensi JavaScript (.js).
Selain sebagai module bundler, dengan berbagai loader dan plugin yang sudah disediakan untuk Webpack, kita bisa gunakan Webpack untuk mengubah ES6 (ECMAScript 2015) menjadi format ES5 (JavaScript yang kita kenal) yang bisa dibaca oleh browser dan bisa mengubah preprocessor CSS kayak SASS, LESS, Stylus, dan saudara-saudaranya menjadi sebuah file CSS yang bisa dibaca di browser.
Kita akan mencoba membuat basic webpack sederhana menggunakan js dan css. Langsung saja kita ikuti petunju berikut ini.
Environtment yang digunakan:
Node v16.13.2
Webpack: "^5.70.0",
Webpack-cli: "^4.9.2"
Basic Installation
Buatlah sebuah folder dengan nama belajar-webpack, kemudian buka terminal dan masuk ke folder tersebut. Jalankan perintah untuk init npm seperti berikut.
npm init -y
npm install webpack webpack-cli --save-devBuat sebuah folder dist dan src. Buatlah sebuah file index.js dan buat sebuah kode sederhana seperti berikut.
alert("Success build!");Buat sebuah file html index.html dan masukkan kode seperti berikut.
<!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>Belajar Webpack</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>Buat file konfigurasi webpack dan masukkan kode seperti berikut.
const path = require('path');
module.exports = {
entry: './src/index.js',,
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};Untuk build file js jalankan perintah seperti berikut.
npm run buildCoba jalankan file index.html lewat browser. Jika berhasil akan muncul seperti berikut.
Kita coba tambahkan sebuah file js baru bernama print.js dan tambahkan kode seperti berikut.
export default function printMe() {
console.log('Berhasil memanggil print.js!');
}Masuk ke file index.js, import file print js tersebut dengan cara ubah source menjadi seperti berikut.
import printMe from './print';
alert("Success build!");
function component() {
const element = document.createElement('div');
const btn = document.createElement('button');
element.innerHTML = "Hello Webpack<br/>";
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());Ubah beberapa line webpack.config.js menjadi seperti berikut.
...
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},Hasil ouput js file di atas adalah index.bundle.js dan print.bundle.js. Sesuai dengan konfigurasi key entry point dan filename yang dibuat.
Jika kalian ingin ouput file paket js menjadi satu file saja kita ubah bagian entry menjadi seperti berikut.
..
entry: ['./src/index.js', './src/print.js'],
..
Install HTMLWebpackPlugin
Jika kita sebelumnya membuat file index.html secara manual, sekarang kita akan membuatnya secara automatis menggunakan HTMLWebpackPlugin.
npm install --save-dev html-webpack-pluginKelebihan menggunakan HTMLWebpackPlugin adalah jika suatu saat kita mengubah endpoint main.js menjadi app.js kita tidak perlu mengganti secara manual. Karena semuanya telah dihandle otomatis oleh HTMLWebpackPlugin. Untuk runing jalankan kembali perintah npm run build
Sesuaikan webpack.config.js menjadi seperti berikut.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {'./src/index.js','./src/print.js'},
devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management - Belajar Webpack',
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};Pada line devtool: 'inline-source-map' digunakan untuk debug jika terdapat error di script js yang telah kita buat.
Menambahkan CSS
Pertama kita install dulu dependecies untuk css
npm install --save-dev style-loader css-loaderTambahkan konfigurasi berikut setelah line output di file webpack.config.js.
...
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
...Buat sebuah css file bernama style.css dan simpan di dalam folder src. Masukkan style sederhana sesuai keinginan kalian.
.hello {
font-size: 16px;
line-height: 1.5;
text-align: center;
}Import style.css di dalam file index.js seperti contoh berikut.
import printMe from './print';
import './style.css';
...
//tambahkan class di dalam div
...
element.classList.add('hello');Jalankan kembali perintah npm run build untuk build ulang pakcage.
Untuk struktur folder kurang lebih seperti berikut.
Demikian tutorial kali ini, semoga bermanfaat. Next kita akan mencoba install jquery dan bootstrap menggunakan webpack.
Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini
CodeIgniter (22)
Komentar 0