HtmlWebpackPlugin 插件

webpackjsorg-main插件参考

HtmlWebpackPlugin 插件

HtmlWebpackPlugin 简化了用于承载 webpack 打包产物的 HTML 文件的创建。当你的 webpack 打包文件名中包含每次编译都会变化的哈希时，该插件尤其有用。你可以让插件为你生成 HTML 文件，也可以使用 lodash 模板提供自己的模板，或者使用你自己的 loader。

安装

bash 复制代码

npm install --save-dev html-webpack-plugin

基本用法

该插件会为你生成一个 HTML5 文件，其中使用 script 标签在 body 中引入所有 webpack 打包产物。将插件添加到 webpack 配置中，如下所示：

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";
import HtmlWebpackPlugin from "html-webpack-plugin";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};

这会生成一个包含以下内容的 dist/index.html 文件：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

如果你有多个 webpack 入口点，它们都会以 <script> 标签的形式包含在生成的 HTML 中。

如果 webpack 的输出中包含任何 CSS 资源（例如通过 MiniCssExtractPlugin 提取的 CSS），这些资源将以 <link> 标签的形式包含在生成 HTML 的 <head> 元素中。

配置

有关所有配置选项，请参阅插件文档。

第三方附加组件

该插件支持附加组件。查看文档获取列表。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。