Hướng dẫn webpack 4 cho người mới bắt đầu

Vậy webpack là gì?

Ngày nay các website đang có xu hướng trở thành những web app với các đặc tính như:

• Càng ngày càng sử dụng JS nhiều hơn
• Những browser ngày càng hỗ trợ những công nghệ mới
• Những trang full-page-reload ít đi, single page app lên ngôi

Dẫn đến phần code client-side ngày càng nhiều. Điều đó có nghĩa chúng ta cần phải có một công cụ để quản lí chúng một cách hiệu quả. Và webpack là một công cụ rất mạnh để làm điều đó. Nó là một module bundler rất mới nhưng đã gây sốt gần đây. 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. Các bạn xem thêm Webpack cho người mới bắt đầu tại đây nhé!

Team webpack đang làm việc tích cực để cho ra thế hệ thứ 4. Mình xin giới thiệu sơ qua các chức năng mới của bản này.

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

Webpack rất mạnh mẽ và có không ít các feature khá độc nhưng bên cạnh đó cũng có không ít các điểm khá hạn chế, một trong số đó là configuration file.

Cung cấp 1 cấu hình cho webpack không phải là một vấn đề lớn trong các dự án vừa và lớn. Tuy nhiên đối với các dự án nhỏ thì nó tỏ ra hơi khó nhằng. Sean và team webpack đang thay đổi điều đó cho thân thiện hơn: webpack 4 sẽ không cần 1 file cấu hình mặc định.

Nào chúng ta thử nó 1 chút, tạo 1 thư mục mới và đi vào trong:

mkdir webpack-4-quickstart && cd $_

Khởi tạo 1 package.json bằng cách chạy lệnh:

npm init -y

Bây giờ kéo về webpack 4. Hiện tại webpack 4 đang trong quá trình beta, điều đó có nghĩa chúng ta nên lấy về từ nhánh Next:

npm i webpack@next --save-dev

npm i webpack-cli --save-dev

"scripts": {
    "build": "webpack"
  }

npm run build

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'

console.log('Huong dan su dung webpack 4);

và build lại xem:

npm run build

The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

Thông báo này có nghĩa là gì? Mở file package.json và update thêm script sau:

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  }

npm run dev

npm run build