1. 介绍
html-webpack-plugin
是一个Webpack插件,用于简化在构建过程中创建HTML文件的过程。它的作用是根据你的Webpack构建配置,在构建时自动生成一个或多个HTML文件,并将打包生成的JavaScript和CSS文件自动引入到这些HTML文件中。
2. 功能
- 自动生成HTML文件:
html-webpack-plugin
插件能够自动生成一个包含正确引用打包后的JavaScript和CSS文件的HTML文件。 - 自定义模板:可以预先提供一个HTML模板文件,
html-webpack-plugin
插件会根据这个模板生成最终的HTML文件,而不是从头开始创建。 - 多页面应用支持: 如果你的应用是多页面的,
html-webpack-plugin
支持配置多个实例,为每个页面生成对应的HTML文件。 - 模板变量:可以在模板中使用变量,插件会根据你的配置替换这些变量,使得生成的HTML更加灵活。
3. 配置示例
javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 其他 webpack 配置...
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html', // 使用的 HTML 模板文件
filename: 'index.html', // 生成的 HTML 文件名称
inject: 'body', // 将脚本注入到 body 元素底部
}),
],
};
在这个例子中,html-webpack-plugin 将会使用 src/index.html 作为模板,生成一个名为 index.html 的HTML文件,而且会将打包后的脚本注入到 body 元素底部。