5

2021 is coming, Stop using React Framework and Create for yourself one

đăng cách đây 1 tháng

Đây là thời điểm thích hợp để bắt đầu tìm hiểu webpack và tự config bộ compiler cho ứng dụng React. 

Tại sao mình nói đây là thời điểm thích hợp:

  • Công nghệ phát triển, webpack bây giờ cũng dễ để config và optimize hơn rất nhiều cách đây 3 4 năm.
  • Tài liệu, boilerplate nhiều có thể thoải mái tham khảo.
  • Cộng đồng phát triển, nếu bạn stuck cái gì, google phát có ngay.
  • Nếu bạn muốn làm chủ hoàn toàn được công nghệ, nắm vận mệnh phát triển cho project của mình. Có thể đơn phương upgrade project của mình mà không phụ thuộc vào một framework. 
  • Kết hợp để build những feature phức tạp khác như server side rendering, micro-frontend, mono-repo.

Thực ra cái số 4, 5 mới là cái thôi thúc các bạn tự config webpack cho project của mình, nếu các bạn đơn thuần xây dựng SPA thông thường thì cứ CRA mà phang, tuy nhiên nó sẽ giới hạn các bạn một số feature ví dụ như webpack alias.

Vẫn có cách để các bạn customize lại config để thêm những feature mới vào, nhưng đòi hỏi các bạn phải viết về webpack, nếu như vậy thì tự config luôn cho rồi. Config của CRA thường sẽ cover rất nhiều usecase mà có thể bạn sẽ không cần đến.

Tham khảo bài viết của anh Lý Nhân về việc customize webpack alias cho CRA:

Trong bài viết này mình sẽ fork lại project của anh Nhân để thay thế config của CRA bằng webpack mình tự config. 

Và điều quan trọng cần làm đó là remove scripts,config  ra khỏi project.

Tạm biệt scripts thân yêu eyyyTạm biệt scripts thân yêu eyyy

Dù rất đau đơn nhưng phải Say yes thôi 🥲 🥲 🥲 

Sau khi xoá folder scripts thì mình xin tạo lại một folder cũng tên là scripts, config nhưng mới hoàn toàn. Pha xử lý tuy đi vào lõi trái đất nhưng nó thể hiện quyết tâm của mình nên các bạn đừng có cười mình nha 😭 😭.. Các bạn hãy mạnh mẽ giống mình.

Prepare

install weback + webpack-cli:

Scripts

package.jsonpackage.json

Tại sao lại có folder scripts này?

Những scripts này thực ra chỉ thực một lệnh CLI của webpack-cli. Ví dụ mình muốn chạy:

webpack --config webpack.config.js --env NODE_ENV=development 

Thay vì mỗi lần start app mình phải chạy lệnh dài loằn ngoằn như thế kia thành những scripts ngắn gọn, dễ nhớ và có thể tái sử dụng.

Để giả lập lại y chang scripts ủa CRA thì mình sẽ tạo folder scripts với với  4 file tương ứng:

  • start: start app ở chế độ development
  • build: build app ở chế độ production
  • test: trigger chạy test
  • index.js: chứa function helpers

Ở trong scripts/index.js mình sẽ viết một function để exec command line để tái sử dụng lại.

scripts/index.jsscripts/index.js

Implement scripts/start.js :

scripts/start.jsscripts/start.js

 Lệnh start chỉ đơn giản là:

  • Set biến môi trường proces.env.NODE_ENV=development
  • Chạy command webpack trỏ vào file config tại config/webpack.config.js

Mình sẽ giải thích chi tiết cho các bạn khi vào implement webpack.config.js

Implement scripts/build.js :

scripts/build.jsscripts/build.js

Lệnh build tương tự như lệnh start là:

  • Set biến môi trường lại proces.env.NODE_ENV=production.
  • Chạy command webpack trỏ vào file config tại config/webpack.config.js

Không thể đơn giản hơn phải không còn. Còn về việc config thì mình sẽ giải thích ở phía dưới nha.

Một phút hỏi đáp:

Q&AQ&A

Tại sao lại phải set lại biến môi trường process.env.NODE_ENV trước khi chạy một command ?

Webpack khi chạy có 1 option đó là mode, trong webpack có 3 mode là production , development , none . 

Khi ở chế độ development:

  • Code build ra sẽ không được Uglify
  • Thay vì lưu code build ra ở Disk, webpack sẽ lưu ở trong RAM, việc này sẽ giúp trong quá trình dev code được build và serve nhanh hơn.
  • Sẽ có những feature chỉ chạy ở development như là Hot Reload.

Khi chạy ở chế độ production:

  • Code build ra sẽ được Uglify, optimize size.
  • File build ra sẽ được hash name để optimize việc caching.

Ngoài ra sử dụng NODE_ENV còn để điều chỉnh config. Mình chỉ nêu ra xơ xài 1 vài ví dụ thôi, các bạn có thể tìm hiểu thêm ở đây

Tại sao phải cần dùng đến một hàm spawn để chạy scripts để start,build ?

Khi bạn gõ lệnh dài loằn ngoằn webpack --config webpack.config.js --env NODE_ENV=development  bản chất bạn đang chạy một command line ở trên terminal. Nên thực thi được những command line ở trong node bạn cần import một package hỗ trợ như là exec hoặc spawn ở trong child_process module.

✧ ✧ ✧

Config

Everybody put your hand's upppp à nhầm put your hand on keyboard chuẩn bị chiến đấu.

Điều đầu tiên và rất là quan trọng, là tạo file config/webpack.config.js trước cái đã 😂😂. Nãy giờ mình đề cập tới file này cũng nhiều nhưng chưa nói về chức năng của nó làm gì.

Ở trên mình có cài đặt scripts start chạy một lệnh để trỏ vào file config. File config này sẽ là file hướng dẫn cho webpack build app.

Ví dụ sẽ có những config entry:'.index.js' để chỉ ra file đầu vào là index.js, webpack sẽ lôi đầu file này ra và build nó.

Struct file webpack.config.js về cơ bản sẽ như này:

webpack.config.js cá mậpwebpack.config.js cá mập

Úi nhầm, đây là bản sau khi implement 😋. Còn đây là bản chưa implement

webpack.config.js cá conwebpack.config.js cá con

Hehe, nhìn đơn giản ha. Nhiệm vụ của mình và các bạn là sẽ implement hết những config này là có thể chạy được app xịn xò như create-react-app với lượng dependencies rất nhỏ gọn chỉ trong vòng 1 bản nhạc của Beethoven.

Để tiện hướng dẫn các bạn thì mình chia lại file như này, và mình sẽ đi qua từng config để tiện theo dõi.

split configsplit config

config.entry

config.output

config.mode

config.resolve

config.plugins

config.target

Updating...

Vì là nói về phần config khá dài nên mình giữ đất trước ở đây. Bài viết sẽ còn được update nữa. Các bạn nhớ vào xem phần update config nha.

https://nextlint.com
#reactjs#react#framework
5
0
...