Webpack 是前端开发中应用最广泛的打包工具之一，它可以将多个 JavaScript 模块打包为一个文件，起到了优化性能、减少网络请求等作用。而 HtmlWebpackPlugin 则是 Webpack 中常用的插件之一，它可以将打包后的 JavaScript 文件自动插入到 HTML 模板中。
安装 HtmlWebpackPlugin
使用 npm 安装 HtmlWebpackPlugin。
npm install --save-dev html-webpack-plugin
使用 HtmlWebpackPlugin
在 Webpack 的配置文件中，使用 HtmlWebpackPlugin 需要进行以下几个步骤。
引入 HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
配置 HtmlWebpackPlugin
下面是一个简单的 HtmlWebpackPlugin 配置示例。
plugins: [ new HtmlWebpackPlugin({ title: 'Webpack Demo', template: 'src/index.html', filename: 'index.html' }) ]
上面的配置中，title 表示 HTML 页面的标题，template 表示 HTML 模板文件的地址，filename 表示生成的 HTML 文件的名称。
使用 HtmlWebpackPlugin
在 JavaScript 文件中使用 Webpack 打包的代码，可以自动将 JavaScript 文件插入到 HTML 模板中。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ------------------------------- ---------- ------- ------ ---- ---------------- --- -------------------------- -- ------- -------展开代码
上面的示例代码中，我们可以看到两个关键的代码块，分别是 <%= htmlWebpackPlugin.options.title %> 和 <%= htmlWebpackPlugin.files.js %>。
<%= htmlWebpackPlugin.options.title %> 表示通过 HtmlWebpackPlugin 配置中的 title 设置 HTML 页面的标题。
<%= htmlWebpackPlugin.files.js %> 则表示将 Webpack 打包后的 JavaScript 文件自动插入到 HTML 模板中。
HtmlWebpackPlugin 的优势
使用 HtmlWebpackPlugin 有以下几个优势。
自动生成 HTML 文件
使用 HtmlWebpackPlugin 可以自动将 Webpack 打包后的 JavaScript 文件插入到 HTML 模板中，并生成 HTML 文件，无需手动创建 HTML 文件，方便快捷。
自动添加版本号
使用 HtmlWebpackPlugin 可以自动向打包后的文件添加版本号，方便进行缓存清除。
自定义 HTML 模板
HtmlWebpackPlugin 支持自定义 HTML 模板，可以通过配置文件设置 HTML 模板，使用者可以灵活地定制自己的 HTML 排版。
总结
HtmlWebpackPlugin 可以帮助我们自动生成 HTML 文件，并将 Webpack 打包后的 JavaScript 文件自动插入到 HTML 模板中。这为我们的开发工作提供了很大的便利，同时也能够提高打包后的 JavaScript 文件的性能表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6457930b968c7c53b0a39dee
