Webpack dev server

Webpack dev server

  • Tương tự như Watch mode ta thiết lập 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, nhưng với Dev Server mode, sẽ tự động tạo một web server (chạy dưới dạng http://localhost:8080).
  • Để thực hiện việc này, ta cần thực hiện các bước sau:
  • Cài đặt webpack-dev-server
  • Chỉnh lại file package.json
  • Chạy lệnh npm start

Cài đặt và setting chạy Dev Server

Cài đặt webpack-dev-server

npm install --save-dev webpack-dev-server
Kết quả

Webpack dev server mode

Chỉnh lại file package.json

{
  "name": "Webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "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"
  }
}

Cài đặt webpack-dev-server

npm start
Kết quả

Webpack dev server mode

  • Khi này Webpack sẽ tự động chạy trang với đường dẫn dạng http://localhost:8080
  • 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.
  • Để kết thúc mode này, ta dùng Ctrl + C, gõ y, enter là được.
  • Tới thời điểm này Học Web Chuẩn đã giới thiệu bạn 2 mode hiệu quả cho việc build tự động, còn một mode Dev Middleware khá tiện lợi, có thể config rất chi tiết, phần này Học Web Chuẩn sẽ không đề cập tới nhé, nếu cần các bạn có thể tham khảo thêm tại Using webpack-dev-middleware ở trang gốc nhé.

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 dev server 
npm install --save-dev webpack-dev-server
npm start

Webpack Watch Mode

Webpack với SCSS