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

Đâ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:

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.

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.

install weback + webpack-cli:

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:

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

Implement scripts/start.js :

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

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 :

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

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.

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:

Khi chạy ở chế độ production:

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.

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:

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

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.

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.