Webpack cơ bản. Hướng dẫn build project front-end (React, Redux, Sass) sử dụng Webpack.

Tram Ho

1. Webpack Cơ bản

Webpack: là static module để gói các ứng dụng JavaScript . 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.
Nói chung thì nó dùng để quản lý các asset(js, css, image, font, vv) trong dự án của bạn.

5 Concepts cơ bản trong webpack:

  • Entry: nó sẽ chỉ modules webpack nào nên sử dụng để bắt đầu xây dựng, có nghĩa là webpack sẽ tìm thằng này đầu tiên.

  • Output: giống như với cái tên của nó, nó sẽ nói với webpack nơi sẽ tạo và đặt tên.

--> KQ nó sẽ tạo folder dist làm nơi chứa và file bundle.js

  • Loader: bình thường webpack chỉ hiểu được javascript và json file. Loader nó sẽ cho phép webpack xữ lí file có định dạng khác và chuyển đổi chúng để sử dụng. Loader có 2 properties la`:
    1. text: nó xác định file nào nên chuyển đổi.
    2. use: nó xác định Loader nào nên sử dụng để chuyển đổi.

  • Plugin: dùng để tối ưu hóa, quản lý asset, vv

HtmlWebpackPlugin: đây là pluin nó sẽ tự động tạo một file html và mặc định nếu ko truyền vào nó sẽ tạo index.html trong folder dist

  • Mode: bằng cách chỉnh tham số value mode = development, production, none bạn có thể cho phép webpack chạy với môi trường nào. Mặc định nó là production

2. Hướng dẫn build project front-end (React, Redux, Sass) sử dụng Webpack

Trước khi bắt đầu, bạn hãy tạo một folder chứa dự án và khởi tạo NPM.

Sau đó cài React, ở đây mình dùng yarn cho nhanh 💪
Bạn cũng có thể xài npm cũng được.

Để render DOM trong React thì chúng ta cần một package là react-dom

Tiếp tới mình sẽ cài thằng Redux.

Trong dự án này thì Redux nó sẽ làm việc với React nên mình sẽ cài thêm một module

Tiếp tới cài node module SASS

Vậy là xong các module chính cho dự án.
Tiếp đến cài webpack,

Do trình duyệt hiểu được cú pháp JS ES5, mà React sử dụng khá nhiều cú pháp JS2015(ES6) nên cần một module để có thể chuyển nó thành ES5 cho browser có thể đọc được.
Đây mình sẽ cài Babel

Bạn tạo một file .babelrc trong thư mục react-app đã tạo ban đầu để cấu hình transpile của babel.
Và thêm vào như sau :

Tiếp theo bạn hãy cài tất cả các module còn lại dùng để chỉnh cấu hình webpack

Mình sẽ giải thích sơ sơ về các module trên

  1. css-loader: nó sẽ phân tích cú pháp vào Javascript
  2. sass-loader: nó biến đổi Sass thành Css
  3. style-loader: chèn CSS vào bên trong thẻ <style>
  4. clean-webpack-pluin: module này nó sẽ dọn dẹp lại thư mục chứa folder build webpack, xóa bỏ các file không cần thiết.
  5. html-webpack-plugin: nó sẽ tự động tạo một file html (nó sẽ tạo file index.html vào folder build webpack)
  6. html-webpack-template: đây là một template tiện lợi cho thằng html-webpack-plugin
  7. webpack-dev-server: nó là module dùng để chạy trên môi trường development
  8. webpack-merge: dùng để ghép các file js với nhau.
  9. mini-css-extract-plugin: nó sẽ thu gọn file css lại cho môi trường product.

Sau khi cài đặt các module xong, mình sẽ tạo một vài file index.js và index.sass

src/js/index.js

src/sass/index.scss

Giờ bạn đã tới bước tùy chỉnh cấu hình webpack 😄
Đầu tiên hãy tạo 3 file webpack.common.js webpack.dev.js webpack.prod.js

  1. webpack.common.js là file webpack cấu hình chung cơ bản.
  2. webpack.dev.js là file webpack dành cho development.
  3. webpack.prod.js là file webpack dành cho product

Mình sẽ bắt đầu cấu hình chung cơ bản trướcwebpack.common.js

Tiếp theo cấu hình môi trường development webpack.dev.js

Kế tiếp bạn cấu hình webpack.prod.jscho môi trường production

Bây giờ còn một công đoạn cuối cùng là chỉnh package.json để chạy thôi 😄

Giờ bạn chạy yarn start để chạy với môi trường development
Nếu bạn cần build cho product để sử dụng thì yarn build

Đến đây, mình xin kết thúc bài viết tại đây. Nếu bạn làm bị lỗi hoặc lạc hướng thì có thể xem source:
link

Đây là bài viết đầu tiên của mình nên có nhiều sai sót mong các bác thông cảm 😄

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo