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ả

Webpack watch mode

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