您现在的位置是：亿华云 > 应用开发

Webpack最常用的插件：HTML Webpack Plugin

亿华云2025-10-03 02:31:17【应用开发】3人已围观

简介今天介绍 webpack 的一个最常用的插件：HTML Webpack Plugin。说它是使用 webpack 开发前端项目必不可少的插件也不为过，因为它可以自动帮我们将 webpack 打包生成的

今天介绍 webpack 的常用一个最常用的插件：HTML Webpack Plugin。

说它是常用使用 webpack 开发前端项目必不可少的插件也不为过，因为它可以自动帮我们将 webpack 打包生成的常用文件(比如 js 文件、css 文件)嵌入到 html 文件中。常用

这在生成的常用文件带有哈希串时尤为有用。

在 webpack 配置文件引入 HtmlWebpackPlugin 插件，常用然后在 plugins 数组中通过 new HtmlWebpackPlugin() 加入 HtmlWebpackPlugin 实例对象即可。常用

// webpack.config.js

const HtmlWebpackPlugin = require(html-webpack-plugin);

module.exports = {

entry: ./src/index.js,常用

output: {

filename: app.[contenthash:8].js,

mode: production,

plugins: [

new HtmlWebpackPlugin()

}

我们执行 npx webpack 命令后，webpack 额外给我们生成了一个 dist/index.html 文件。常用该 html 文件格式化后得到的常用内容为：

Webpack App

可以看到将打包好的 app.js 文件被自动嵌入到 head 元素下最后一个子元素位置。

这里打包文件名尾部被添加了内容哈希串，常用这意味着每次项目的常用内容发生变化，哈希串的常用值都不同。

试想下，常用如果你自己管理 html 文件，常用每次都要改这个 js 文件名，是要多累，还好有 HtmlWebpackPlugin 帮忙。

当然前面这种只是 HtmlWebpackPlugin 插件的默认用法，我们可以做更具体的定制化。服务器托管

一些常用的属性

我们需要传入一个配置对象来进行模板渲染定制化。

HtmlWebpackPlugin 的配置非常丰富，不过常用的就几个。

plugins: [

new HtmlWebpackPlugin({

title: 前端西瓜哥的博客,

favicon: static/favicon.ico,

}),

titile：设置网页标题。filename：生成 html 文件名，默认值为 index/html。template：使用自己的模板，这里填这个模板的路径，使用了之后一些配置项就无效了，比如 title。favicon：指定网站图标路径，除了会在 html 上填充 favicon 相关内容，还会将该文件拷贝到打包文件夹下，非常好用。minify：是否压缩 html 文件。不设置时，如果 webpack 的 mode 为 production，就会压缩 html，移除多余的空格和注释之类的。使用自定义 html 模板

在实际开发中，通常是创建一个 index.html 提供给 HtmlWebpackPlugin 插件作为模板。

这样的源码下载话，title 等配置和一些更细碎的内容就可以直接写到 html 上。相比配置，直接在 html 上编辑要更直观些。

我们在根目录创建一个 index.html 作为模板：

前端西瓜哥

这样就可以直接在 html 模板上添加 title，以及一些 cdn 形式的第三方库。

webpack.config.js 配置改为：

plugins: [

new HtmlWebpackPlugin({

template: index.html

}),

生成的 html 为：

前端西瓜哥