html-webpack-plugin 使用教程
项目介绍
html-webpack-plugin
是一个简化创建 HTML 文件以服务 webpack 打包文件的插件。它能够自动生成一个 HTML 文件,并将 webpack 打包后的静态文件自动插入到这个 HTML 文件中。这个插件对于需要自动管理 HTML 文件和静态资源的项目非常有用。
项目快速启动
安装
首先,你需要安装 html-webpack-plugin
:
npm install --save-dev html-webpack-plugin
基本配置
在你的 webpack 配置文件中引入并配置 html-webpack-plugin
:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
这个配置将会在 dist
目录下生成一个 index.html
文件,并在其中插入一个指向 index_bundle.js
的 <script>
标签。
应用案例和最佳实践
自定义模板
你可以使用自定义的 HTML 模板来生成 HTML 文件。例如:
new HtmlWebpackPlugin({
template: 'src/index.html'
})
多入口配置
如果你有多个 webpack 入口点,html-webpack-plugin
会自动将它们全部包含在生成的 HTML 文件中:
module.exports = {
entry: {
app: 'app.js',
vendor: 'vendor.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
包含 CSS 文件
如果你有 CSS 文件通过 webpack 输出(例如使用 mini-css-extract-plugin
),这些 CSS 文件将会被包含在生成的 HTML 文件的 <head>
元素中。
典型生态项目
增强资产安全
- webpack-subresource-integrity: 用于增强资产安全。
离线使用
- appcache-webpack-plugin: 用于 iOS 和 Android 的离线使用。
生成 favicons
- favicons-webpack-plugin: 生成 favicons 和图标,适用于 iOS、Android 和桌面浏览器。
开发服务器
- html-webpack-harddisk-plugin: 在开发服务器或 HMR 使用时,始终将 HTML 文件写入磁盘。
内联 SVG
- html-webpack-inline-svg-plugin: 在生成的 HTML 文件中内联 SVG。
通过这些插件和配置,你可以更高效地管理和优化你的 webpack 项目。