Webpack

Webpack merupakan sebuah module bundler JavaScript 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. Tidak cuma itu, Webpack juga digunakan saat kita pakai Front-endFramework kayak ReactJS, VueJS, Angular dan sejenisnya.

https://webpack.js.org/

Persiapan

Kebutuhan minimal untuk menggunakan Webpack adalah tahu dan paham cara pakai terminal/console/command prompt/Bash dan NPM (Node Package Manager). Sisanya keahlian Web Front-End.

Implementasi

Membuat Project baru, buka terminal atau sejenisnya lalu masuk ke folder yang akan digunakan sebagai path anda.

mkdir mywebpack
cd mywebpack
npm init -y
npm install webpack webpack-cli --save-dev

Tunggu sampai proses selesai, lalu buat struktur folder seperti berikut :

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js
+ |- webpack.config.js

+ Berarti buat folder dan file yang ada di dalamnya.

src/index.js

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

package.json

{
  "name": "learning-webpack",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "dependencies": {
    "lodash": "^4.17.15",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.8"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Sumber

  1. https://webpack.js.org/guides/getting-started/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>