HtmlWebpackPlugin
HtmlWebpackPlugin 简化了创建 HTML 文件以服务于 webpack 捆绑包的过程。这对于文件名中包含哈希的 webpack 捆绑包特别有用，该哈希在每次编译时都会更改。你可以让插件为你生成一个 HTML 文件，使用 lodash 模板 提供你自己的模板，或使用你自己的 加载器。
安装
npm install --save-dev html-webpack-plugin基本用法
该插件将为你生成一个 HTML5 文件，其中包含使用 script 标签在正文中生成的所有 webpack 捆绑包。将插件添加到 webpack 配置中，如下所示
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>如果你有多个 webpack 入口点，它们都将包含在生成的 HTML 中的 <script> 标签中。
如果你在 webpack 的输出中有任何 CSS 资产（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么这些资产将包含在生成的 HTML 的 <head> 元素中的 <link> 标签中。
配置
对于所有配置选项，请参阅 插件文档。
第三方插件
该插件支持插件。有关列表，请参阅 文档。
« 上一页
ChunksWebpackPlugin4 位贡献者
