Webpack Watch Mode | Hướng Dẫn Học | Học Web Chuẩn

Webpack watch mode

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học webpack
• Webpack watch mode

Webpack watch mode

• Watch mode là cách thiết lập file package.json sao cho có thể tự động build nếu có thay đổi các file Javascript, CSS, SCSS, ... thay vì mỗi lần như vậy cần phải chạy lại lệnh npm run build.
• Ta có thể kích hoạt tính năng watch mode bằng cách chỉnh lại file package.json như sau:

{ "name": "Webpack-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.2.0", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.8.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "style-loader": "^1.0.0", "terser-webpack-plugin": "^2.1.0", "webpack": "^4.40.2", "webpack-cli": "^3.3.9" } }

• Thay vì chạy lệnh npm run build ta chỉ cần chạy lệnh npm run watch một lần duy nhất:

npm run watch Kết quả

• Thử thay đổi nội dung file /src/index.js như sau:

import './style.css'; import './index.css'; import './my-test.js'; function component() { const element = document.createElement('div'); element.innerHTML = 'I can do it!'; return element; } document.body.appendChild(component());

• Từ giờ, nếu có thay đổi các file CSS, Javascript, ... ta chỉ cần reload lại trang /dist/index.html mà không cần chạy lại lệnh npm run build.
• Ta thấy sau khi chạy npm run watch thì mode này sẽ được giữ, tiện cho việc thay đổi các file CSS, Javascript, ...
• Để kết thúc mode này, ta dùng Ctrl + C, gõ y, enter là được.

Các lệnh chính đã sử dụng trong toàn bộ bài học

Bài học	Lệnh đã dùng
Cài đặt Webpack	cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli
Webpack bundle	npx webpack
Cấu hình Webpack	npx webpack --config webpack.config.js npm run build
Webpack quản lý output	npm run build
Webpack code splitting	npm install --save lodash npm run build npm run build
Cài đặt và setting HtmlWebpackPlugin	npm install --save-dev html-webpack-plugin npm run build
Cài đặt và setting CleanWebpackPlugin	npm install --save-dev clean-webpack-plugin npm run build
Webpack Cache	npm run build npm run build
Webpack gom chung các file javascript	npm run build
Webpack source map	npm run build npm run build
Webpack css loader	npm install --save-dev style-loader css-loader npm run build
Webpack minify CSS - OptimizeCSSAssetsPlugin	npm install --save-dev mini-css-extract-plugin npm install --save-dev optimize-css-assets-webpack-plugin npm run build npm run build
Webpack minify Javascript - TerserJSPlugin	npm install --save-dev mini-css-extract-plugin npm install --save-dev terser-webpack-plugin npm run build
Webpack watch mode	npm run watch

Webpack minify Javascript

Webpack Dev Server Mode

Học web chuẩn

HƯỚNG DẪN HỌC

Webpack

• Webpack là gì?
• Cài đặt webpack
• Webpack Bundle
• Xử lý cấu hình Webpack
• Webpack quản lý output
• Webpack phân tách code
• Sắp xếp nội dung file HTML
• Dọn dẹp, xóa file không sử dụng
• Webpack Cache
• Gom chung các file javascript
• Webpack source map
• Webpack CSS loader
• Webpack minify CSS
• Webpack minify Javascript
• Webpack Watch Mode
• Webpack Dev Server Mode
• Webpack với SCSS
• Webpack với React.js

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

• Tham khảo
• Tham khảo HTML4/XHTML
• Tham khảo HTML5
• Tham khảo CSS
• Tham khảo CSS3
• Tham khảo jQuery

CHUYÊN ĐỀ

• Chuyên đề
• Chuyên đề HTML/CSS
• Chuyên đề HTML5/CSS3
• Chuyên đề jQuery/JS
• jQuery/JS plugin

GÓP Ý - LIÊN HỆ

• BẠN SẼ TÀI TRỢ?DONATE
• CÔNG CỤ TẠO CSS3CSS3 GENERATOR
• BỘ CÔNG CỤGENERATOR TOOLS
• CÔNG CỤ HỖ TRỢWEB TOOLS
• CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
• CÔNG CỤ KIỂM TRA RESPONSIVE TEST
• CHIA SẺ HAYWEB & TOOLS

• 
• 
•