Webpack đối với c&aacute;c nh&agrave; ph&aacute;t triển front end l&agrave; một thuật ngữ đ&atilde; qu&aacute; quen thuộc nhưng với nhiều người th&igrave; kh&ocirc;ng phải vậy. N&oacute; được xem l&agrave; c&ocirc;ng cụ c&oacute; khả năng g&oacute;i gọn to&agrave;n bộ file css v&agrave; js từ module n&agrave;y sang module kh&aacute;c theo cấu tr&uacute;c project. Ngo&agrave;i ra n&oacute; c&ograve;n c&oacute; thể thực hiện được nhiều hoạt động hữu &iacute;ch kh&aacute;c nữa. Để c&oacute; thể hiểu được Webpack l&agrave; g&igrave; cũng như những lợi &iacute;ch lớn kh&aacute;c m&agrave; n&oacute; mang đến th&igrave; bạn kh&ocirc;ng n&ecirc;n bỏ qua b&agrave;i viết của Bizfly Cloud dưới đ&acirc;y.
<h2 style="text-align: justify;">Webpack l&agrave; g&igrave;?&nbsp;</h2>
Webpack l&agrave; một c&ocirc;ng cụ phần mềm được sử dụng với mục đ&iacute;ch quản l&yacute; c&aacute;c module của JavaScript. Webpack sẽ thực hiện c&ocirc;ng việc đ&oacute;ng g&oacute;i tất cả c&aacute;c m&atilde; nguồn của chương tr&igrave;nh cũng như h&igrave;nh ảnh, font, CSS,... khi ch&uacute;ng hoạt động. Mọi thứ được Webpack đ&oacute;ng g&oacute;i th&agrave;nh một file hay một v&agrave;i file n&agrave;y sẽ được gọi l&agrave; Assets.
Mặc d&ugrave; phải đ&oacute;ng g&oacute;i rất nhiều dữ liệu nhưng Webpack lu&ocirc;n đảm bảo c&aacute;c dữ liệu n&agrave;y được đ&oacute;ng g&oacute;i cẩn thận, ngăn nắp v&agrave; b&agrave;i bản với cấu tr&uacute;c tương tự như việc viết m&atilde; code. C&aacute;c dữ liệu n&agrave;y sẽ được lập tr&igrave;nh sẵn để x&aacute;c định được thứ tự c&aacute;i n&agrave;o chạy trước, c&aacute;i n&agrave;o chạy sau cũng như c&aacute;c phần sẽ phụ thuộc v&agrave;o nhau.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Tyoescript được tạo chủ yếu cho JavaScript, nhưng n&oacute; c&oacute; thể chuyển đổi c&aacute;c nội dung giao diện người d&ugrave;ng như HTML, CSS v&agrave; h&igrave;nh ảnh nếu c&oacute; c&aacute;c bộ tải tương ứng." src="https://tek4.vn/public_files/15ccf91a-8709-464b-898b-be6f5810799f" alt="Webpack l&agrave; g&igrave;" />
<h2 style="text-align: justify;">L&yacute; do khiến bạn n&ecirc;n sử dụng Webpack?&nbsp;</h2>
Với sự ph&aacute;t triển mạnh mẽ của Javascript nhất l&agrave; c&aacute;c đoạn m&atilde; code được viết sẵn như AngularJS hay ReactJS gi&uacute;p code được giảm thiểu v&agrave; n&acirc;ng cao trải nghiệm cho người d&ugrave;ng tốt hơn. Tuy nhi&ecirc;n, điều n&agrave;y lại khiến c&aacute;c module JS v&agrave; bộ nhớ trong ứng dụng kh&ocirc;ng thể kiểm so&aacute;t v&agrave; khiến website phải đối mặt với t&igrave;nh trạng bị ph&igrave;nh ra. Từ đ&oacute;, việc sắp xếp c&aacute;c m&atilde; nguồn như thế n&agrave;o để việc quản l&yacute; v&agrave; truy xuất dữ liệu lại l&agrave; vấn đề xảy ra. V&agrave; Webpack ra đời ch&iacute;nh l&agrave; giải ph&aacute;p tốt nhất gi&uacute;p cải thiện t&igrave;nh trạng qu&aacute; tải v&agrave; bừa b&atilde;i cho dữ liệu. Ngo&agrave;i ra, những hoạt động kh&aacute;c m&agrave; Webpack c&oacute; thể thực hiện đ&oacute; l&agrave;:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Khả năng đ&oacute;ng g&oacute;i resource.</li>
<li style="font-weight: 400;" aria-level="1">Theo d&otilde;i những thay đổi của task v&agrave; chạy lại task.</li>
<li style="font-weight: 400;" aria-level="1">Khả năng thực hiện việc bi&ecirc;n dịch từ Babel sang ES5 để người d&ugrave;ng c&oacute; thể sử dụng c&aacute;c t&iacute;nh năng mới nhất của Javascript m&agrave; kh&ocirc;ng cần phải lo lắng bất kỳ thứ g&igrave; về hỗ trợ tr&igrave;nh duyệt.</li>
<li style="font-weight: 400;" aria-level="1">Khả năng chuyển dịch từ CoffeeScript sang JavaScript v&agrave; chuyển đổi h&igrave;nh ảnh từ inline sang data URLs</li>
<li style="font-weight: 400;" aria-level="1">Người d&ugrave;ng sử dụng được c&aacute;c c&acirc;u lệnh require cho c&aacute;c file CSS.</li>
<li style="font-weight: 400;" aria-level="1">Khả năng chạy một web server d&ugrave;ng cho development v&agrave; xử l&yacute; c&aacute;c hot module replacement.</li>
<li style="font-weight: 400;" aria-level="1">T&aacute;ch nhỏ c&aacute;c file output th&agrave;nh c&aacute;c file kh&aacute;c nhau để tr&aacute;nh việc tải file JS qu&aacute; lớn khi tải trang lần đầu.</li>
</ul>
<h2 style="text-align: justify;">Mục ti&ecirc;u của Webpack&nbsp;</h2>
Webpack được ra đời v&agrave; ph&aacute;t triển nhằm mục đ&iacute;ch đ&aacute;p ứng được một số mục ti&ecirc;u cơ bản như sau:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Chia c&aacute;c dependency (phần phụ thuộc) th&agrave;nh từng chuck (phần) để c&oacute; thể nhanh ch&oacute;ng tải l&ecirc;n ngay khi cần thiết.</li>
<li style="font-weight: 400;" aria-level="1">R&uacute;t ngắn tối đa thời gian init.</li>
<li style="font-weight: 400;" aria-level="1">Mỗi asset tĩnh đều c&oacute; thể trở th&agrave;nh một module (chức năng) ri&ecirc;ng biệt.</li>
<li style="font-weight: 400;" aria-level="1">Khả năng t&iacute;ch hợp thư viện của b&ecirc;n thứ ba tương tự như một module.</li>
<li style="font-weight: 400;" aria-level="1">Hầu hết c&aacute;c th&agrave;nh phần của module bundler đều c&oacute; thể được custom.</li>
<li style="font-weight: 400;" aria-level="1">Webpack sẽ nhanh ch&oacute;ng trở th&agrave;nh phần mềm được sử dụng rộng r&atilde;i bởi nhiều doanh nghiệp v&agrave; ph&ugrave; hợp với tất cả c&aacute;c dự &aacute;n lớn.</li>
</ul>
<h2 style="text-align: justify;">C&agrave;i đặt Webpack&nbsp;</h2>
Để c&agrave;i đặt Webpack một c&aacute;ch hiệu quả, bạn c&oacute; thể thực hiện theo hướng dẫn của Bizfly Cloud dưới d&acirc;y:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Khởi tạo Webpack bằng lệnh &ldquo;npm init"</li>
<li style="font-weight: 400;" aria-level="1">Trong thư mục sẽ c&oacute; 1 file package.json sau khi chạy Webpack xong.</li>
</ul>
Sau đ&oacute;, tuỳ thuộc v&agrave;o từng dự &aacute;n thực hiện m&agrave; bạn c&oacute; thể dễ d&agrave;ng lựa chọn c&agrave;i đặt Webpack tr&ecirc;n Local hoặc Global.&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">C&agrave;i đặt Webpack tr&ecirc;n Local: Để nhanh ch&oacute;ng c&agrave;i đặt Webpack tr&ecirc;n Local bằng c&aacute;ch g&otilde; c&aacute;c lệnh sau:</li>
</ul>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Yarn: yarn add webpack webpack-cli -D</li>
<li style="font-weight: 400;" aria-level="1">Npm: npm install webpack webpack-cli --save-dev</li>
</ul>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">C&agrave;i đặt Webpack tr&ecirc;n Global:</li>
</ul>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Yarn: yarn global add webpack webpack-cli</li>
<li style="font-weight: 400;" aria-level="1">Npm: npm install -g webpack webpack-cli</li>
</ul>
Sau khi đ&atilde; ho&agrave;n tất việc c&agrave;i đặt Webpack, bạn cần th&ecirc;m file package.json v&agrave;o đoạn m&atilde; code v&agrave; cho chạy Webpack.
Khi c&agrave;i đặt Webpack, chắc chắn bạn kh&ocirc;ng thể bỏ qua việc cấu h&igrave;nh n&oacute;. Đối với Webpack từ phi&ecirc;n bản 4 trở n&ecirc;n, bạn chỉ cần tu&acirc;n theo c&aacute;c quy ước sau m&agrave; kh&ocirc;ng cần thực hiện bất kỳ bước cấu h&igrave;nh n&agrave;o:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Trong ứng dụng, entry point l&agrave; ./src/index.js.</li>
<li style="font-weight: 400;" aria-level="1">Output của ứng dụng sẽ được đưa v&agrave;o ./dist/main.js.</li>
<li style="font-weight: 400;" aria-level="1">Webpack hoạt động tốt trong m&ocirc;i trường production.</li>
</ul>
Tuy nhi&ecirc;n, người d&ugrave;ng vẫn c&oacute; thể tuỳ chỉnh Webpack khi cần thiết bởi cấu h&igrave;nh của Webpack được lưu trữ tại file webpack.config.js tại thư mục gốc của dự &aacute;n.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Người d&ugrave;ng vẫn c&oacute; thể tuỳ chỉnh Webpack khi cần thiết bởi cấu h&igrave;nh của Webpack được lưu trữ tại file webpack.config.js tại thư mục gốc của dự &aacute;n." src="https://tek4.vn/public_files/1ac7a040-6887-48a8-8d5b-06da2c61887d" alt="C&agrave;i đặt webpack" />
<h2 style="text-align: justify;">Module trong webpack&nbsp;</h2>
C&aacute;c module trong Webpack sẽ được ph&acirc;n th&agrave;nh ba mục nhỏ như sau:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">preLoaders (tiền xử l&yacute;): L&agrave; những xử l&yacute; được nạp v&agrave;o trước khi c&aacute;c module loader bắt đầu. Th&ocirc;ng thường, c&aacute;c dev trong preLoaders sẽ check syntax của n&oacute; với ESLint hoặc JSHint.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Loader: L&agrave; c&aacute;c xử l&yacute; compile nhiều loại ng&ocirc;n ngữ kh&aacute;c nhau với khả năng cho ph&eacute;p người d&ugrave;ng xử l&yacute; một file trước khi load hay require. Ngo&agrave;i ra, module n&agrave;y gi&uacute;p chuyển đổi 1 file từ nhiều c&uacute; ph&aacute;p hay ng&ocirc;n ngữ kh&aacute;c nhau th&agrave;nh js thuần.</li>
<li style="font-weight: 400;" aria-level="1">postLoaders (hậu xử l&yacute;): C&aacute;c xử l&yacute; sau c&ugrave;ng đều cần phải được th&ocirc;ng qua bởi postLoaders.</li>
</ul>
Tuy nhi&ecirc;n, từ phi&ecirc;n bản v2.1-beta.23, t&ecirc;n gọi của Loader sẽ được đổi th&agrave;nh rules v&agrave; preLoaders hay postLoaders sẽ được x&aacute;c định dựa tr&ecirc;n thuộc t&iacute;nh enforce nếu Loaders n&agrave;y l&agrave; một trong hai module c&ograve;n lại (hoặc l&agrave; preLoaders hoặc l&agrave; postLoaders).
<h2 style="text-align: justify;">Plugin trong webpack&nbsp;</h2>
Tương tự như c&aacute;c Loader module của Webpack nhưng c&aacute;c plugin c&oacute; thể l&agrave;m được nhiều hơn v&agrave; l&agrave; một phần quan trọng hơn của Webpack so với Loader module. Một v&agrave;i những plugin thường được sử dụng trong Webpack c&oacute; thể thấy như Webpack bundle analyzer, UglifyJSPlugin Webpack Dashboard,...
<h2 style="text-align: justify;">Thiết lập c&aacute;c kịch bản Webpack&nbsp;</h2>
Mục đ&iacute;ch của việc thiết lập c&aacute;c kịch bản Webpack thường nhằm giảm thời lượng chờ kh&ocirc;ng cần thiết v&agrave; gia tăng thời gian deploy. Chế độ n&agrave;y được Webpack giới thiệu bao gồm development v&agrave; production. Để thiết lập kịch bản Webpack, bạn cần mở file package.json, sau đ&oacute;:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Chạy Webpack bằng c&uacute; ph&aacute;p: &ldquo;scripts&rdquo;: { &ldquo;build&rdquo;: &ldquo;webpack&rdquo; // lệnh chạy npm run build}</li>
<li style="font-weight: 400;" aria-level="1">Xem thay đổi v&agrave; cập nhật bằng c&uacute; ph&aacute;p: &ldquo;scripts&rdquo;: { &ldquo;watch&rdquo;: &ldquo;webpack -watch&rdquo;// lệnh chạy npm run watch}</li>
</ul>
Kết:
Webpack c&oacute; thể được cập nhật li&ecirc;n tục theo từng dự &aacute;n v&agrave; người d&ugrave;ng c&oacute; rất &iacute;t khả năng được trải nghiệm những t&iacute;nh năng mới nhất nếu đ&oacute; l&agrave; một dự &aacute;n nhỏ. Tuy nhi&ecirc;n đ&acirc;y vẫn l&agrave; một c&ocirc;ng cụ phần mềm tuyệt vời hứa hẹn sẽ mang đến cho bạn nhiều lợi &iacute;ch m&agrave; kh&ocirc;ng phải c&ocirc;ng cụ n&agrave;o cũng c&oacute; được như xử l&yacute; c&aacute;c asset tĩnh, kiểm so&aacute;t qu&aacute; tr&igrave;nh xử l&yacute; asset, chia t&aacute;ch m&atilde; nguồn, tiết kiệm thời gian,... Chắc chắn với nguồn th&ocirc;ng tin hữu &iacute;ch m&agrave; Bizfly Cloud chia sẻ đ&atilde; đủ để bạn hiểu Webpack l&agrave; g&igrave; để c&aacute;c c&ocirc;ng việc li&ecirc;n quan đến code được tối ưu v&agrave; quản l&yacute; một c&aacute;ch tuyệt vời nhất.

Admin

Webpack là gì? Hướng dẫn cài đặt và sử dụng Webpack

Cùng tác giả

Admin

Có liên quan