教程 > Webpack 教程 > Webpack 教程 阅读：1232

Webpack HTML 打包介绍

本章节我们介绍 webpack 打包 html 的知识点。

在上一章 Webpack 第一个简单应用 中，我们简单介绍了webpack打包 Javascript文件。但是在文章末尾我们提出了一个问题：

在某些情况下，手动编写我们的 index.html 文件可能会出现问题。 例如，如果我们更改入口点的名称，生成的包将被重命名，但我们的 index.html 文件仍将引用旧名称。 因此，每次重命名入口点或添加新入口点时，我们都需要手动更新 HTML 文件。

幸运的是，我们可以使用 html-webpack-plugin 轻松的修复这个问题。 现在让我们安装该插件：

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

webpack-html-webpack-plugin-安装成功

此时，要激活插件，我们需要在根目录下创建一个 webpack.config.js 文件，内容如下：

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack - 迹忆客(jiyik.com)",
    }),
  ],
};

如你所见，要激活 webpack 插件，我们需要在webpack.config.js文件中进行定义，然后将其添加到 plugins 数组中。 如果需要，我们还将选项传递给插件。

现在让我们运行 webpack 看看会发生什么：

$ npm run dev

> webpack-example@1.0.0 dev /Users/jiyik/workspace/js/webpack-example
> webpack --mode development

asset main.js 1.22 KiB [compared for emit] (name: main)
asset index.html 250 bytes [emitted]
./src/index.js 31 bytes [built] [code generated]
webpack 5.54.0 compiled successfully in 146 ms

让我们打开 index.html。 正如我们所见，插件会自动为我们创建一个新的 index.html 文件，它使用配置中的 title 选项：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack - 迹忆客(jiyik.com)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.js"></script></head>
  <body>
  </body>
</html>

我们再次在浏览器中打开该 index.html 文件，运行结果如下

webpack 打包html运行结果

通过上面我们可以看到，同样会在console 控制台中显示 Hello Webpack !!，并且 title 也是在配置文件中定义的。

使用 HTML 模板

在上面的html示例中，我们看到，使用 html-webpack-plugin 生成的默认 index.html 文件中，只能运行引入的 js 代码。html-webpack-plugin 插件也允许我们使用 html模板，这样我们就可以在html文件中定义自己喜欢的内容了。

要使用 html 模板其实也很简单，只需要在 webpack.config.js 配置文件的 HtmlWebpackPlugin 参数重添加 template 配置项

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
    hash: true,
    title: 'Webpack Example App',
    header: 'Webpack Example Title',
    metaDesc: 'Webpack Example Description',
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
  })
  ],
};
  • template: './src/index.html' - 定义要使用的模板。
  • filename: 'index.html' - 定义的是由模板生成的静态html文件的位置及其文件名，默认的位置为 dist 文件夹。
  • hash: true - 表示不进行缓存。
  • injext: 'body' 用来确保 script 出现在 HTML 中 <body> 元素的底部。
  • 其余的是在模板文件中进行引用的可以认为是变量的内容。

更多的选项查看 html-webpack-plugin 选项

src/index.html 模板

<!DOCTYPE html>
<html lang="en">
<head>
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta name="description" content="<%= htmlWebpackPlugin.options.metaDesc %>" />
</head>
<body>
  <h1><%= htmlWebpackPlugin.options.header %></h1>

  <div id="wrapper" style="height: 120px">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
  </div>
  <div id="zoom-scene"></div>

</body>
</html>

注意 - 这里的 index.html 不同于 dist文件夹中的 index.html，前者是模板，后者是生成的用来运行的html文件。 当然我们的模板文件也不一定非得命名为 index.html，根据实际情况进行命名。

通过上面的模板的内容，我们还可以看到，要想在模板中引用在配置文件中定义的内容（可以认为是在配置文件中定义变量，在模板文件中引用这些变量的值）可以通过 htmlWebpackPlugin.options 对象进行引用，如： htmlWebpackPlugin.options.title

下面让我们运行webpack，看发生了什么

$ npm run dev

> webpack-example@1.0.0 dev /Users/jiyik/workspace/js/webpack-example
> webpack --mode development

asset main.js 1.22 KiB [compared for emit] (name: main)
asset index.html 539 bytes [emitted]
./src/index.js 31 bytes [built] [code generated]
webpack 5.54.0 compiled successfully in 172 ms

运行之后，生成的html静态文件内容如下

dist/index.html 静态文件

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Webpack - 迹忆客(jiyik.com)</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="Webpack Example Description" />
</head>
<body>
  <h1>Hello Webpack !!</h1>

  <div id="wrapper" style="height: 120px">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
  </div>
  <div id="zoom-scene"></div>

<script defer src="main.js?ccaf6170bb8b514cf334"></script></body>
</html>

在浏览器中运行 index.html 文件，结果如下

webpack html模板运行结果

查看笔记

扫码一下
查看教程更方便