Webpack là gì? Những thông tin cần nắm vững về webpack

Với xu hướng phát triển như hiện nay, các web app đang phát triển với những đặc tính như: càng ngày càng sử dụng nhiều JS, các browser hỗ trợ những công nghệ mới, những trang full – page – reload it đi và những single page app ngày càng nhiều lên. Điều này có nghĩa là cần phải có một công cụ để quản lý chúng một cách hiệu quả. Vì thế Webpack ra đời và nó chính là một công cụ mạnh để có thể quản lý một cách hiệu quả.Vậy Webpack là gì? Công dụng của Webpack là gì? Bài viết dưới đây sẽ giúp bạn tìm hiểu về Webpack.

Giới thiệu về Webpack 

Webpack là công cụ có thể gói gọn toàn bộ file js, css bao gồm cả scss, sass,… Việc thực hiện gói gọn này được thực hiện theo cấu trúc project và theo thứ tự từ module này sang phần khác.

 

Webpack là gì? 

Webpack là gì? 

Webpack là một module bundler còn khá mới, nó nhận vào các module cùng với các dependencies và generate ra các static assets tương ứng.

Mục tiêu của Webpack

  • Chia các cây dependency thành các chunk được load khi cần thiết
  • Thời gian init sẽ ngắn hơn
  • Mỗi static asset đều có thể trở thành một module
  • Chúng có khả năng tích hợp 3rd-party library như module
  • Ngoài ra, webpack còn có khả năng custom gần như mọi thành phần của module bundler
  • Nó rất phù hợp với các dự án lớn
  • Webpack được đánh giá cao nhờ nó sở hữu nhiều chức năng hữu dụng. Webpack sử dụng plugin nén 1 file giảm từ 6mb xuống 76kb.
  • Webpack còn có khả năng contribute của một cộng đồng dev khổng lồ nên webpack đã trở thành một tool sở hữu những khả năng hỗ trợ cho các dev js.

Bạn đọc tham khảo thêm: ruby on rails là gì – Chúng có những ưu điểm gì nổi bật?

Những kiến thức cần nắm vững về Webpack là gì?

Webpack 4 không cần cấu hình module bundler

Webpack là một công cụ rất mạnh mẽ và không ít các feature khá độc, ngoài ra nó cũng có những điểm hạn chế cho phần mềm này là configuration file.

Cung cấp các cấu hình cho webpack đã không còn là vấn đề mới. Nhưng với những dự án nhỏ thì nó sẽ trở nên rắc rối hơn. Sean cũng như team webpack đang dần thay đổi và trở nên thân thiện hơn. Webpack là công cụ mà không cần 1 file với cấu hình mặc định.

 

Cách chạy webpack hiệu quả nhất hiện nay

Cách chạy webpack hiệu quả nhất hiện nay

Trong webpack 4 thì bạn không cần phải define entry point và cũng không cần trong output file.

Webpack 4 production và development mode

Webpack thường có 2 cấu hình phổ biến là:

  • 1 file là cấu hình cho development để có thể define webpack dev server và một số thứ khác.
  • Còn cấu hình còn lại sẽ dành cho production để define uglifyjsplugin, sourcemaps,…

Khi gặp những project lớn thì bạn cần phải có 2 file này. Bên trong webpack 4 thì bạn có thể dùng 2 trạng thái của nó mà không cần phải thực hiện cấu hình nào.

Module trong webpack

Nếu có input và output rồi thì cần phải có module. Đây là một trong những khai báo loaders, preloaders, postloaders,…

 

Module Bundler trong webpack

Module Bundler trong webpack

  • PreLoaders: là các tiền xử lý thường được nạp khi tiến hành chạy các module loader. Nó hỗ trợ load các ESLint hay còn gọi là check cú pháp, JSHint. Thường thì bước này cần phải tiến hành config nếu như thực hiện code trên môi trường dev. Đối với môi trường product thì bạn cần phải xóa đi những người thực hiện để đỡ mất thời gian check lại.
  • Loaders: ở bước này, bạn cần phải khai báo một mảng bởi những compile những ngôn ngữ khác nhau. Đây chính là một trong những bước khai báo quan trọng đối với một webpack. 

VD: Bạn chuyển LESS, CSS, ES6 về dạng ES5 thì người thực hiện có thể sử dụng babel.

Code splitting trong webpack

Những người biết Webpack thì code splitting cũng được biết đến như một tính năng thu hút được nhiều người dùng.

 

Cài đặt webpack để mang lại sự tiện ích tuyệt vời trong quá trình làm việc

Cài đặt webpack để mang lại sự tiện ích tuyệt vời trong quá trình làm việc

Thường thì có 3 cách để tiếp cận với split code đó là:

  • Entry point: Phân chia thủ công với những cấu hình file entry, để file có thể bắt đầu chạy ứng dụng để webpack hoạt động.
  • Prevent duplication: Sử dụng split Chunk để tiến hành xóa bundle trùng lặp và các split ra các chunks. Hiểu một cách đơn giản hơn là: Webpack sẽ tự động tìm kiếm các thư viện để import ra các file riêng khác nhau. Khi code logic của bạn cần thì sẽ lấy những file riêng này để sử dụng.
  • Dynamic import: Công việc chia code có thể thông qua các function được gọi trong các modules.

Entry point: Đây chính là một trong những cách thủ công và thường không sử dụng đến. Với trường hợp cả index.js và lib.js đều được add cùng một thư viện C thì sẽ giống như bạn đã sử dụng thư viện C2 lần.

Prevent duplication: Với prevent duplication thì sẽ cho phép plugin split Chunks lấy hết các thư viện được import trong project để tách ra thành các file riêng biệt đến khi nào code logic cần những thư viện đó, thì nó sẽ tự động import.

Dynamic import

Đối với hàm dynamic import hoặc hàm getcomponent sẽ return dynamic imports và trả về lodash. Chúng cần thực hiện các thao tác phức tạp này vì Dynamic import nó sẽ import lodash khi cần cũng như giúp gia tăng performance.

Plugin trong webpack

Hiện nay, với sự đóng góp từ rất nhiều cộng đồng, nên số lượng plugin ngày càng lớn. Những plugin không thể thiếu  khi run project là: UglifyJSPlugin  webpack Dashboard, webpack bundle analyzer,…

Cách sử dụng:

const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: {

  index: './src/index.js',

  lib: './src/lib.js'

},

plugins:

   [

    new HTMLWebpackPlugin({ title: 'Code Splitting' }),

    new webpack.optimize.CommonsChunkPlugin({ name: 'common' })

   ],

output: {

   filename: '[name].bundle.js',

   path: path.resolve(__dirname, 'dist')

}

};

Môi trường chạy

Nếu bạn học cơ bản về webpack thì có thể cài create – react – app của facebook, việc này sẽ khiến bạn học dễ dàng hơn. Còn muốn nâng cao lên, bạn có thể cài project về react trên github đọc thử và sẽ có thể thấy nhiều file lạ, đó chính là webpack. 

Cơ chế chạy của webpack thường sẽ khác hoàn toàn so với create react – app và thường thì nó sẽ tích hợp sẵn các file mới tạo ra với nhiều chương trình khác.

Nhưng trong project nó sở hữu 3 file webpack. Thông thường với một kịch bản để dev phát triển và bản product để build server cho user sử dụng. Với những bản dev thì bạn có thể giữ lại comment code. Còn bản product thì bạn muốn minify để có thể tối ưu được. 

Ba file webpack này gồm:

  • config.js: Đây là một trong những file chạy chung cho cả 2 môi trường.
  • config.dev.js: thường thì chỉ chạy cho môi trường dev, bạn có thể plugin auto log data để có thể cho lập trình viên dễ dàng phát triển sản phẩm hơn.
  • config.prod.js: Nó chỉ triển khai đối với môi trường production, bạn có thể config, minify hoặc xóa comment,…

Bạn đọc tham khảo thêm: Những thông tin đầy đủ nhất về .net core là gì

Ưu và nhược điểm của webpack là gì?

Ưu điểm:

  • Webpack rất tốt cho việc bạn xây dựng một website single page.
  • Nó cho phép bạn sử dụng cả 2 cú pháp require và import.
  • Nó cũng cho phép bạn phân tách code.

Ngoài những ưu điểm vượt trội trên nó vẫn có những nhược điểm như là: 

  • Webpack không thích hợp với những ai mới học web.
  • Nó làm việc với các css files, images và một số file khác không phải js. Như thế nó có thể gây khó hiểu với những ai đang tìm hiểu về webpack.

Kết luận

Webpack là một công cụ có thể nói là hữu ích. Thông thạo sử dụng webpack là một lợi thế rất lớn khi code, nó sẽ giúp bạn dễ dàng hơn trong công việc và có thể tối ưu được những project và quản lý dự án một cách hiệu quả và tuyệt vời. 

Bài viết trên đã trả lời cho câu hỏi Webpack là gì? Và những kiến thức cần nắm vững về webpack. Hy vọng, bài viết trên giúp bạn hiểu rõ hơn về webpack và những công dụng của nó.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *