2 posts tagged with "Webpack"

3 steps to create React app from nothing​

Step 1. npm init​

• Ở bước này ta tạo được một môi trường để quản lí thu viện cũng như source code của dự án
• Được biết là React là một thư viện để tạo giao diện (UI) được chia nhỏ thành các component bằng code JS (Dùng JSX để viết giao diện)
• ReactDOM Là thư viện được tách ra từ React core => mục đích nhằm tách biệt phần tạo giao diện với phần giao tiếp với DOM ReactDOM là lớp liên kết giữa React và DOM, VD: như muốn hiện thị component React vào một DOM nào đó ta dùng

ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'))

// hoặc để tìm DOM
ReactDOM.findDOMNode()

• React-router-dom Cơ bản React là thư viện để tạo UI cho ứng dụng nên thực chất nó không có Router, khi đó để có thẻ điều hướng trên một ứng dụng React ta cần dùng thư viện này Bài viết chi tiết về React-router-dom sẽ được nói trong một bài viết khác

• webpack

Step 2. Install react react-dom react-router-dom webpack​

• webpack: là thư viện để tạo ra bundle file từ các file đầu vào js, css, resource ...
• webpack-cli: Từ bản v4 đươc chia ra từ webpack core, dùng để chạy webpack bằng CLI, phù hợp với production
• webpack-dev-server: thực hiện hot reload khi có bất kì thay đổi nào từ file đầu vào. Phù hợp với qúa trình development

Triết lí của webpack.​

1. Mọi thứ đều là module: tất cả các file html, css, js, images... đều được webpack coi là một module. Từ đó hoàn toàn có thể export và import nó ở bất cứ chỗ nào để dùng.
2. Chỉ load nhưng thứ cần và load khi cần thiết: Khi file bundle trở nên quá lớn thì việc client load sẽ trở nên khó khăn và ảnh hưởng đến trải nghiệm. Như vậy webpack có một số cơ chế để tách nhỏ file bundle thành nhiều file ứng với mục đích khác nhau.

Link ref source pure react: https://github.com/vuanhtu1993/observation-state

Webpack là gì ?​

• Chắc hẳn bạn là người mới làm quen với front-end sử dụng các library hoặc framework js sẽ thường có các câu hỏi như là nó để làm gì, taị sao phải phức tạp nó ên như thế...

• Definition 1: Webpack là một module loader cho javascript

• Definition 2: module loader là một công cụ để quản lí import của các thư viện js, merge chúng tại với nhau để tạo ra một hoặc một vài file bundle

  • Tại sao lại cần dùng module loader: Hiện tại thế giới front-end không giống như là HTML, CSS, JQuery là cân được thế giới như ngày xưa nữa. Khi thực hiện một dự án React, Vue hay Angular chúng ta phải sử dụng rất nhiều các thư viện khác mà cứ để vào thẻ <script/> như trước chắc chắn là ko ổn cũng như hiệu năng
    bị hạn chế => Module loader ra đời

• Definition 3: Loader nà gì?. Là những thư viện mà webpack cho phép can thiệp trước khi import files. Cho phép không chỉ bundle js files mà cả nhưng static như css, image ... (Vậy nghĩa là muốn bundle cái gì thì làm ơn install loader cái đấy vào nhá) VD một số Loader: style-loader, babel-loader max phổ biến file-loader...

• babel-loader: làm nhiệm vụ transpile ES6 -> ES5 vậy muốn bundle js thì cho web hiểu thì cần babel-loader chạy trước webpack (giờ còn ai không viết es6 nữa giơ tay nào để bỏ bố cái thằng này đi)

• style-loader: Như đã nói ở phần định nghĩa loader, style loader là một thư viện nhằm nâng cao khả năng của webpack không chỉ bundle js mà còn bundle cả style (đơn giản là nhét vào thẻ s)

• file-loader: tượng tự như style-loader, nhưng là để bundle static file

• Sass/scss-loader: Lại là một thư viện dể tiền sử lí trước style-loader

  • sass-loader transforms Sass thành CSS.
  • css-loader parses CSS vào JavaScript và resolve dependencies.
  • style-loader chèn CSS vào bên trong thẻ style