Hướng dẫn html-webpack-plugin - html-webpack-plugin
Show Cài đặt và setting HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin Kết quả  Chỉnh nội dung file webpack.config.js: const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
Các lệnh chính đã sử dụng trong toàn bộ bài học
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 đặtLink plugin: https://github.com/jantimon/html-webpack-plugin Cài cho Webpack 5 Cài cho Webpack 4 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};02. 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
1 và thiết lập file theo cấu trúc bên dướiconst path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};13. Cách sử dụngPlugin 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.config.js const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};2Giờ chạy thử webpack xem thế nào:
2Với cấu hình trên webpack sẽ tự động tạo ra một file
3 chứa các mục sauconst path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};3Lư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. const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};44. Option titleThay đổi giá trị title của trang HTML như sau
Ví dụ chúng ta đổi title thành: Webpack từ A đến Á cùng kentrung const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};5Kết quả const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};65. Option filenameThay đổ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)
Ví dụ chúng ta tạo ra trang: cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli0 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};76. Option templateQuy định trang mẫu cho trang HTML được output.
Ví dụ nếu chúng ta muốn output ra trang cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli0 từ trang nguồn cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli5 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};87. 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ụ chúng ta tạo ra hai trang
3 và cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli0 const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
/*[name]: [path]*/
app: './src/index.js',
print: './src/my-test.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};98. Option chunksỞ phần trên lúc tạo ra hai trang
3 và cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli0 thì cả hai trang này đều load chung một file npx webpack0. Để 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
0Với cấu hình trên thì ta có hai trang HTML load hai file JS riêng biệt. Trang
3 load file npx webpack2 là kết hợp của hai file npx webpack3 và npx webpack4 Trang cd Webpack-project npm init -y npm install --save-dev webpack npm install --save-dev webpack-cli0 load file npx webpack6 là code file npx webpack7 9. Custom templateCó 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. 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!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é
1Ví dụ chúng ta tạo trang npx webpack8 và trong này gọi trang npx webpack9 thì cấu trúc file như này
2
3
4
5Chạy lại webpack
2 và giờ mở file npx webpack --config webpack.config.js npm run build1 xem kết quả
6Quá 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.
|
