Webpack 5 - Kiso

Webpack từ A đến Á: HTML Webpack Plugin

Bài hôm nay chúng ta sẽ học về plugin html-webpack-plugin được dùng để sắp xếp các file html theo một trật tự nhất định, giúp tối ưu file html hơn. 1. Cài đặt Link plugin: https://github.com/jantimon/html-webpack-plugin Cài cho Webpack 5 npm i --save-dev html-webpack-plugin Cài cho Webpack 4 npm i --save-dev html-webpack-plugin@4 2. Chuẩn bị......

Webpack từ A đến Á: Clean Webpack Plugin

Nếu các bạn đã làm qua các bài ví dụ trước ở trong series này thì sẽ thấy folder dist của chúng ta có rất nhiều file và trở nên khá lộn xộn. Webpack đã tạo các file và đặt chúng vào folder dist giúp bạn nhưng nó không theo dõi những file nào thực......

Webpack từ A đến Á: Webpack Sass Loader

Trong bài trước chúng ta đã biết cách thiết lập Webpack để load css trong ứng dụng của bạn thông qua style-loader và css-loader. Bài hôm nay chúng ta sẽ học cách chuyển scss thành css thông qua sass-loader 1. Chuẩn bị file <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webpack......

Webpack từ A đến Á: Webpack Css Loader

Trong bài trước chúng ta đã biết cách thiết lập Webpack để load css vào bên trong file javascript thông qua style-loader. Giờ chúng ta sẽ giải quyết thêm một vài vấn đề khi import ảnh hay import font trong file css thông qua css-loader 1. Chuẩn bị file <!DOCTYPE html> <html lang="en"> <head> <meta......

Webpack từ A đến Á: Webpack Style Loader

Trong bài trước chúng ta đã biết cách thiết lập Webpack để load ảnh vào trong ứng dụng của bạn. Bài hôm nay chúng ta sẽ học cách load css thông qua style-loader 1. Chuẩn bị file Code file dist/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webpack từ A đến......

Webpack từ A đến Á: Webpack File Loader

Trong bài trước chúng ta đã biết cách thiết lập Webpack để sử dụng hình ảnh trong ứng dụng của bạn thông qua url-loader. Bài hôm nay cũng tương tự như vậy nhưng lại sử dụng file-loader, nó giúp chúng ta giải quyết các vấn đề liên quan đến import – require một file, file-loader......

Webpack từ A đến Á: Webpack Asset Modules Inline

Trong bài hướng dẫn này chúng ta sẽ tìm hiểu cách thiết lập Webpack để sử dụng hình ảnh trong ứng dụng của bạn thông qua url-loader, nó giúp chúng ta mã hóa hình ảnh thành chuỗi base64 URIs, cùng tìm hiểu xem cách load hình ảnh vào Javascript như thế nào. 1. Chuẩn bị......

Webpack từ A đến Á: Eslint Webpack Plugin

Trong một dự án tất cả các ngôn ngữ, kể cả HTML và CSS đều phải tuân theo quy tắc thì mới có thể tạo nên một dự án tốt được. Không có quy tắc, mỗi người code theo những phong cách khác nhau sẽ tạo nên một mớ hỗn độn, đơn cử như người......

Webpack từ A đến Á: Webpack Babel Loader

Khi làm việc cùng Javascript, đôi khi ta cảm thấy thật phiền toái khi áp dụng các cú pháp mới nhất thì code chạy được trên trình duyệt này, lại chết trên trình duyệt khác, hay cùng một trình duyệt version mới nhất thì ok, nhưng lại ngắc ngoải trên version thấp hơn vì chưa......

Webpack từ A đến Á: Webpack resolve alias – extensions

Bài hôm nay chúng ta sẽ học cách tạo alias trong webpack cùng với cách xử lí đuôi file mở rộng extensions 1. Alias là gì? Alias là đường dẫn tuyệt đối thay thế cho đường dẫn tương đối khi import các module. Ví dụ như sau: // thay vì dùng import Menu from '../../../components/Menu'......

Webpack từ A đến Á: Webpack code splitting

Code Splitting là một trong những tính năng hấp dẫn của webpack. Tính năng này cho phép bạn chia code của mình thành nhiều gói khác nhau, phân tách đoạn code hoặc thư viện giống nhau ra một file riêng. Nó có thể được sử dụng để tách ra các gói nhỏ hơn và kiểm......

Webpack từ A đến Á: Webpack import jQuery – Materialize

Bài trước chúng ta đã biết cách thêm thư viện jQuery vào trong webpack. Bài hôm nay sẽ tiếp tục học cách thêm thư viện Materialize phiên bản 1.0.0 1. Chuẩn bị file và tình huống Các file code ban đầu: const path = require('path') module.exports = { entry: './src/index.js', output: { filename: 'main.js', path:......

Webpack từ A đến Á: Webpack import Bootstrap 5

Bài trước chúng ta đã biết cách thêm thư viện jQuery vào trong webpack. Bài hôm nay sẽ tiếp tục học cách thêm thư viện bootstrap phiên bản 5.x.x cụ thể ở đây là 5.1.3 1. Chuẩn bị file Các file code ban đầu: const path = require('path') module.exports = { mode: 'development', entry: './src/index.js',......

Webpack từ A đến Á: Webpack import jQuery

Bài viết hôm nay mình sẽ hướng dẫn các bạn cách thêm thư viện jQuery vào trong webpack theo phong cách load module. Nếu như ngày xưa chúng ta phải thêm jQuery vào trang web theo kiểu này <script src="jquery.js"></script> Giờ với webpack chúng tôi không làm như thế vì không hợp với xu thế......

Webpack từ A đến Á: Webpack source map

Khi webpack biên dịch và đóng gói mã nguồn của bạn, việc theo dõi lỗi hay cảnh báo có thể trở nên khó khăn. Ví dụ: nếu bạn có ba file code a.js b.js và c.js ghép thành một file ouput bundle.js, một trong các file nguồn có lỗi, chỗ thông báo lỗi sẽ chỉ......

Webpack từ A đến Á: Webpack import export module

Import – Export Module là một trong những tính năng tuyệt vời của JavaScript, chúng đã được tiêu chuẩn hóa trong ES2015 (ES6) và được hỗ trợ trong hầu hết các trình duyệt tại thời điểm này, tuy nhiên có một số trình duyệt không nhận ra cú pháp mới nhưng không sao đừng lo......

Webpack từ A đến Á: Webpack multiple file types per entry

Ở bài trước chúng ta đã học được cách tạo được nhiều output từ nhiều key entry, mỗi key entry là một file. Bài hôm nay sẽ là mỗi key entry nhưng nhiều file. Ví dụ chúng ta có 2 file home.js và slider.js, ta muốn gộp hai file này làm một file output duy......

Webpack từ A đến Á: Webpack multiple entry points

Bài hôm nay chúng ta tìm hiểu về quản lí output với nhiều file đầu vào entry, tên của các file output sẽ dựa vào tên của các entry. 1. Chuẩn bị file Các file code ban đầu const path = require('path') module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }......

Webpack từ A đến Á: Webpack output hash digest

Bài hôm nay chúng ta sẽ tìm hiểu về output hash digest. Nếu như ở bài trước chúng ta đã output ra được một file dist/main.js thì khi thêm giá trị hash output nó sẽ build ra kiểu như dist/main.f24fea.js còn code bên trong thì vẫn vậy chẳng khác gì. Tác dụng chính của nó......

Webpack từ A đến Á: Webpack dev server

Ở bài năm chúng ta đã học về chế độ watch mode để webpack có thể tự động build lại nếu có thay đổi code. Bài hôm nay chúng ta sẽ học cách tạo một web server đơn giản tại địa chỉ localhost:8080 và tự động reload thông qua webpack-dev-server 1. Chuẩn bị file Các......