5 Phút Làm Quen Với Webpack

Viết bởi: Đình Anh , 4 tháng trước

Trong bài viết ngắn này chúng ta sẽ cùng nhau tìm hiểu cách cài đặt và sử dụng Webpack, qua đó bạn sẽ có một cái nhìn cơ bản nhất về công cụ đang trở nên phổ biến trong giới frontend.

Webpack Là Gì

Webpack là gì

Webpack được định nghĩa đơn giản như sau:

Webpack là một công cụ dùng để build các mô-đun JavaScript.

Để hiểu về định nghĩa ngắn gọn và có vẻ khó hiểu ở trên chúng ta sẽ cùng nhau thực hành một dự án nhỏ. Trước tiên chúng ta cần cài đặt công cụ Webpack CLI trên máy.

Cài Đặt Webpack

Yêu cầu: Máy tính của bạn cần cài đặt Node.jsNode Package Manager.

Webpack CLI là chương trình chạy trên cửa sổ dòng lệnh dùng để thực hiện các tác vụ liên quan. Chúng ta sẽ cài đặt công cụ thông qua câu lệnh sau trên cửa sổ dòng lệnh:

$ npm install -g webpack

Trường hợp sau khi chạy câu lệnh trên máy tính báo lỗi permission denied như sau:

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/webpack'
npm ERR!     at Error (native)
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules/webpack']
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/webpack' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR!     /var/www/html/test/webpack/npm-debug.log

Thì bạn cần chạy câu lệnh dưới quyền root:

$ sudo npm instal -g webpack

Sau khi cài đặt xong Webpack chúng ta có thể sử dụng câu lệnh webpack trên cửa sổ dòng lệnh.

Tạo Module

Tiếp theo bạn hãy tạo một thư mục hello-webpack và bên trong đó tạo một file cats.js với nội dung sau:

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

Ở đoạn code trên chúng ta sử dụng module.exports để tạo một mô-đun (module) JavaScript đơn giản là một mảng với 3 phần tử. Lưu ý rằng đối tượng module không tồn tại nếu bạn sử dụng JavaScript trên web, tuy nhiên đối tượng này có trong Node.js.

Tải Module

Tiếp theo chúng ta sẽ tạo một file app.js ở cùng thư mục hello-webpack ở trên:

cats = require('./cats.js');
console.log(cats);

Đoạn code trên sử dụng hàm require() để tải module được định nghĩa trong cats.js và gán giá trị trả về (là mảng) vào biến cats.

Bundle

Sau khi tạo ra các file JavaScript cần thiết chúng ta sẽ thực hiện việc bundle ứng dụng. Để làm điều này bạn chạy câu lệnh sau:

$ webpack ./app.js app.bundle.js

Dùng Webpack để bundle mô đun JavaScript

Kết thúc câu lệnh bạn sẽ thấy một file app.bundle.js được tạo ra. Webpack sẽ tổng hợp toàn bộ code trong cả hai file JavaScript app.jscats.js để tổng hợp lại trong file này.

Danh sách file sau khi Webpack bundle

Chạy Tập Tin Bundle

Cuối cùng trên cửa sổ dòng lệnh bạn chạy tập tin bundle:

node app.bundle.js

Kết quả hiển thị:

["dave", "henry", "martha"]

Tới đây nếu như rành về Node.js thì bạn có thể sẽ đặt ra câu hỏi là tại sao không chạy luôn file app.js mà lại cần chạy file app.bundle.js. Câu trả lời cho câu hỏi này là bởi vì đối tượng module và hàm require có sẵn trong Node.js nhưng không có sẵn trong JavaScript chạy trên trình duyệt.

Sử dụng Webpack bạn có thể sử dụng module.exportrequire sau đó bundle ứng dụng để chạy trên web.

Sử Dụng Webpack Cho Ứng Dụng Web

Chúng ta sẽ tìm hiểu một ví dụ khác để sử dụng Webpack cho các ứng dụng web.

Đầu tiên bạn tạo một file index.html với nội dung như sau:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

Tập tin index.html trên có tham chiếu tới file bundle.js. Đây sẽ là file JavaScript được bundle sử dụng Webpack mà chúng ta sẽ thực hiện ở các bước sắp tới.

Tiếp theo bạn tạo một file content.js với nội dung như sau:

module.exports = "It works from content.js.";

Ở đoạn code trên chúng ta tạo một module đơn giản, module này trả về là một đoạn chuỗi với nội dung:

It works from content.js.

Tiếp theo bạn tạo một file entry.js với nội dung như sau:

var content = require("./content.js");
document.write(content);

Ở đoạn code trên chúng ta load module được định nghĩa trong content.js sử dụng hàm require():

require("./content.js")

Cuối cùng chúng ta thực hiện bundle ứng dụng thông qua chạy câu lệnh sau trên cửa sổ dòng lệnh:

$ webpack ./entry.js bundle.js

Bây giờ sử dụng trình duyệt để mở tập tin index.html bạn sẽ thấy nội dung sau:

It works from content.js.

Kết Luận

Như bạn thấy Webpack là một công cụ hiệu quả trong việc bundle các module JavaScript trong ứng dụng. Ưu điểm của việc sử dụng webpack ở chỗ bằng việc tách nhỏ mã lệnh ra các module khác nhau thì source code trong ứng dụng của bạn có thể được quản lý dễ dàng. Trong các dự án thực tế chúng ta sẽ sử dụng các tập tin config để cấu hình việc bundle module. Một file config mẫu có thể như sau:

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

Ngoài ra việc hỗ trợ bundle các module của JavaScript thì Webpack cũng hỗ trợ việc bundle các file JavaScript viết sử dụng CoffeeScript hoặc Jade, các file ảnh, file CSS hoặc các file LESS... Chúng ta sẽ tìm hiểu về các tính năng này ở các bài viết tiếp theo.

Webpack JavaScript Frontend Node.js Bundler
Thêm Bình Luận: