Learn about Webpack
I.What is Webpack? 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. ...
I.What is Webpack?
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.
II.Install Webpack
Yêu cầu: Máy tính của bạn cần cài đặt Node.js và Node 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 WARN checkPermissions Missing write access to /usr/lib/node_modules/webpack
npm WARN checkPermissions Missing write access to /usr/lib/node_modules/webpack/node_modules
npm WARN checkPermissions Missing write access to /usr/lib/node_modules
npm ERR! path /usr/lib/node_modules/webpack
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules/webpack'
npm ERR! { Error: EACCES: permission denied, access '/usr/lib/node_modules/webpack'
npm ERR! stack: 'Error: EACCES: permission denied, access '/usr/lib/node_modules/webpack',
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/lib/node_modules/webpack' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
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.
III.Create Module
Tiếp theo bạn hãy tạo một thư mục webpack và bên trong đó tạo một file webpack_js.js với nội dung sau:
var webpack_js = ['1', '2', '3']; module.exports = webpack_js;
Ở đoạn code trên chúng ta sử dụng module.exports để tạo một 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.
IV.Module Loader
Tiếp theo chúng ta sẽ tạo một file demo.js ở cùng thư mục webpack ở trên:
demo = require('./webpack_js.js');
console.log(demo);
Đoạn code trên sử dụng hàm require() để tải module được định nghĩa trong webpack_js.js và gán giá trị trả về (là mảng) vào biến demo.
V.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 ./demo.js demo.bundle.js
Kết thúc câu lệnh bạn sẽ thấy một file demo.bundle.js được tạo ra. Webpack sẽ tổng hợp toàn bộ code trong cả hai file JavaScript webpack_js.js và demo.js để tổng hợp lại trong file này.
VI.Run Bundle Files
Cuối cùng trên cửa sổ dòng lệnh bạn chạy tập tin bundle:
node demo.bundle.js
Kết quả hiển thị:
["1", "2", "3"]
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 demo.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.export và require sau đó bundle ứng dụng để chạy trên web.
VII.Use Webpack For Web Applications
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.
a. Nodejs
Đầu tiên bạn tạo một file index.ejs trong folder views với nội dung như sau:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<%= message %>
</body>
</html>
Tập tin index.ejs trên sẽ render ra message được sử dụng trong file js mà chúng ta resolve views
Tiếp theo bạn tạo một file content.js với nội dung như sau:
var express = require('express');
var http = require('http');
var app = express();
var path = require('path');
app.set("views", path.resolve(__dirname, "views"));
app.set("view engine", "ejs");
app.get('/home', function(req, res) {
res.render("index", {message: "hello webpack"});
});
app.use(function(req, res) {
res.redirect('/home');
})
http.createServer(app).listen(3000);
Ở đ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:
hello webpack
Bạn chỉ cần run node content.js và truy cập vào url
localhost:3000/home
Ta sẽ thấy nội dung:
Hello webpack.
b. HTML
Đầ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="demo.js" charset="utf-8"></script>
</body>
</html>
Tập tin index.html trên tham chiếu đến demo.js Tiếp theo bạn tạo một file content.js với nội dung như sau:
module.exports = "Hello webpack.";
Tiếp theo bạn tạo một file app.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 ./app.js demo.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:
Hello webpack.
VIII.Reason
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: "./app.js",
output: {
path: __dirname,
filename: "demo.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...
