- vừa được xem lúc

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

0 0 57

Người đăng: kentrung

Theo Viblo Asia

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 nội dung 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 _@.com

2. Chuẩn bị file

Để bài học được dễ dàng theo dõi chúng ta nên xóa các file trong folder dist và thiết lập file theo cấu trúc bên dưới

webpack-demo ... |- dist/ |- src/ |- index.js |- package.json |- webpack.config.js

3. Cách sử dụng

Plugin sẽ tự động tạo một file HTML, chỉ cần import và thêm plugin vào file cấu hình webpack

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin() ]
}

Giờ chạy thử webpack xem thế nào: npm run dev

Với cấu hình trên webpack sẽ tự động tạo ra một file dist/index.html chứa các mục sau

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>Webpack App</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script src="main.js"></script> </body>
</html>

Lưu ý là code trên đã được mình format lại cho dễ nhìn còn thực tế là code HTML đã bị minify lại, loại bỏ tất cả các khoảng trống thừa, bỏ comment, gom các dòng code lại thành một dòng duy nhất, giảm tối đa dung lượng file, tối ưu source code hơn, vân vân và mây mây... Thực tế như này.

<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="main.js"></script></body></html>

4. Option title

Thay đổi giá trị title của trang HTML như sau

  • Tên thuộc tính: title
  • Kiểu dữ liệu: String
  • Mặc định: 'Webpack App'

Ví dụ chúng ta đổi title thành 'Webpack từ A đến Á cùng kentrung'

module.exports = { ... plugins: [ new HtmlWebpackPlugin({ title: 'Webpack từ A đến Á cùng kentrung' }) ]
}

Kết quả

<head> ... <title>Webpack từ A đến Á cùng kentrung</title>
</head>

5. Option filename

Thay đổi tên file HTML được output ra, bạn cũng có thể chỉ định thư mục chứa trang HTML (eg: assets/admin.html)

  • Tên thuộc tính: filename
  • Kiểu dữ liệu: String
  • Mặc định: index.html

Ví dụ chúng ta tạo ra trang dist/about.html thì code như sau:

module.exports = { ... plugins: [ new HtmlWebpackPlugin({ title: 'Webpack từ A đến Á cùng kentrung', filename: 'about.html' }) ]
}

6. Option template

Quy định trang mẫu cho trang HTML được output.

  • Tên thuộc tính: template
  • Kiểu dữ liệu: String
  • Mặc định: By default it will use src/index.ejs if it exists. Please see the docs for details

Ví dụ nếu chúng ta muốn output ra trang dist/about.html từ trang nguồn src/about-dev.html thì code như sau:

module.exports = { ... plugins: [ new HtmlWebpackPlugin({ title: 'Webpack từ A đến Á cùng kentrung', filename: 'about.html', template: './src/about-dev.html' }) ]
}

Còn một vài cái hay ho nữa nhưng bài cũng dài rồi nên mình tạm nghỉ để chuyển sang phần hai.

7. Generating Multiple HTML Files

Để tạo ra được nhiều trang HTML, bạn chỉ cần khai báo thêm giá trị vào trong mảng plugin. Ví dụ ở đây mình tạo ra hai trang dist/index.htmldist/about.html thì sửa lại file cấu hình webpack như sau:

module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin(), // Generates default index.html new HtmlWebpackPlugin({ // Also generate a about.html title: 'Webpack từ A đến Á cùng kentrung', filename: 'about.html' }) ]
}

8. Option chunks

Ở phần trên lúc tạo ra hai trang dist/index.htmldist/about.html thì cả hai trang này đều load chung một file dist/main.js. Để tách riêng từng trang load từng file JS ta tạo key entry và sử dụng chunks để thêm vào

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: { homepage: ['./src/index.js', './src/slider.js'], aboutpage: ['./src/about.js'] }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ title: 'Trang chủ', filename: 'index.html', template: './src/index.html', chunks: ['homepage'] }), new HtmlWebpackPlugin({ title: 'Về chúng tôi', filename: 'about.html', template: './src/about-dev.html', chunks: ['aboutpage'] }) ]
}

Với cấu hình trên thì ta có hai trang HTML load hai file JS riêng biệt.

Trang dist/index.html load file dist/homepage.js là kết hợp của hai file src/index.jssrc/slider.js

Trang dist/about.html load file dist/aboutpage.js là code file src/about.js

9. Custom template

Có bạn hỏi liệu có thể tách code HTML ra thành từng phần nhỏ rồi gọi nó vào được không?

Tại sao lại không nhỉ?

Javascript cũng tách ra các file nhỏ được, css cũng tách ra các file nhỏ được.

=> vậy thì html cũng sẽ làm được. Ngon!

Một trong các cách đó là sử dụng html-loader nên các bạn phải cài đặt nó nhé

npm install html-loader --save-dev

Lấy ví dụ ta tạo trang src/home.html và trong này gọi trang src/header.html thì cấu trúc file như này

webpack-demo ... |- src/ - index.js - header.html - home.html
<header> Em là header
</header>
<!doctype html>
<html lang="en">
<head> <meta charset="utf-8"> <title>Webpack từ A đến Á cùng kentrung</title> <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> <%= require('html-loader!./header.html') %>
</body>
</html>
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack từ A đến Á cùng kentrung', filename: 'home.html', template: './src/home.html' }), ]
}

Chạy lại webpack npm run dev và giờ mở file dist/home.html xem kết quả

<!doctype html>
<html lang="en">
<head> <meta charset="utf-8"> <title>Webpack từ A đến Á cùng kentrung</title> <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body> <header>Em là header</header> <script src="main.js"></script>
</body>
</html>

Quá tuyệt vời phải không? Các bạn thậm chí có thể đặt biến, if-else, vòng lặp, strip tag các kiểu hệt như ngôn ngữ lập trình thực thụ, giờ code HTML cũng đã lên một trình mới rồi nhé.


Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 525

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 433

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 153

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 145

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 110

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 245