1. Mở đầu

Trong bài viết này chúng ta sẽ cùng tìm hiểu cách mà Webpack lưu giữ các module trên browser, cũng như quản lý depedency của các module trên browser.

2. Tạo lập môi trường giả lập

Để bắt đầu, chúng ta tạo mới một thư mục có tên là webpack-runtime và cài đặt các packages cần thiết

$> mkdir webpack-runtime
$> cd webpack-runtime
$> yarn init 
$> yarn add -D webpack webpack-cli

Sau đó trong thư mục webpack-runtime , chúng ta tạo mới một file webpack.config.js có nội dung như sau

// webpack.config.js 

const path = require("path");

module.exports = { 
	// cần set config là `development` để webpack chưa minify source code
  mode: "development",
	// cần disable `devtool` vì nếu không webpack sẽ sử dụng `eval` để 
  // sinh code, làm cho code khó đọc hơn 
  devtool: false,       
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

Chúng ta cũng tạo ra fie src/a.js có nội dung như sau

// a.js 
export function foo() {
  console.log("a");
}

File a.js sẽ export ra một function với tên foo , thông qua file này chúng ta sẽ hiểu cách mà webpack đăng ký một module mới với đường dẫna.js, cũng như cách mà webpack exports hàm foo

Sau đó, chúng ta sử dụng hàm src/index.js có nội dung như sau

// index.js
import { foo } from "./a";

(function () {
  foo();
});

File src/index.js sẽ là entry của webpack. Trong file này chúng ta import code từ module a , đồng thời cũng sử dụng code từ module này. Thông qua file này, chúng ta cũng sẽ nắm bắt được cách mà webpack sinh code để sử dụng một hàm bất kỳ

3. Quản lý JS Module trên browser với Webpack

Ở terminal, chúng ta sử dụng lệnh webpack -c để start webpack cli lên. Webpack sẽ tự động đọc file config webpack.config.js , sinh ra code và lưu giữ tại dist/bundle.js

Chúng ta sẽ cùng xem nội dung của file dist/bundle.js này để hiểu các API runtime mà Webpack sử dụng.

File dist/bundle.js được chia làm 3 nội dung chính