📌  相关文章
📜  htmlWebpackPlugin.options.title - Javascript (1)

📅  最后修改于: 2023-12-03 15:15:44.176000             🧑  作者: Mango

htmlWebpackPlugin.options.title - Javascript

简介

htmlWebpackPlugin.options.title 是一个 Webpack 插件 html-webpack-plugin 的可配置项，用于设置最终生成的 HTML 文件的标题。

用法

在 Webpack 的配置文件中，引入 html-webpack-plugin，并在插件的配置项中设置 title 属性。

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

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My Website',
      // ...
    }),
    // ...
  ],
  // ...
};
参数

title 参数可以是一个字符串或者一个函数，如果是函数，则会在 Webpack 构建时动态生成。

字符串

当 title 是字符串类型时，最终生成的 HTML 文件的标题就是这个字符串。

new HtmlWebpackPlugin({
  title: 'My Website',
}),

这样设置之后，在 HTML 文件的 <head> 标签中会自动生成以下代码：

<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <!-- ... -->
</head>
函数

当 title 是函数类型时，可以根据需要自定义生成 HTML 文件的标题。

new HtmlWebpackPlugin({
  title: (pageName) => `My Website - ${pageName}`,
}),

这里的 pageName 代表当前页面的名称，在 Webpack 构建时会动态生成，并将生成的值传入函数中。

这样设置之后，在 HTML 文件的 <head> 标签中会自动生成以下代码：

<head>
  <meta charset="UTF-8">
  <title>My Website - Home</title>
  <!-- ... -->
</head>
结论

htmlWebpackPlugin.options.title 是非常实用的一个插件配置项，可以方便地定制最终生成的 HTML 文件的标题，从而优化网站的 SEO。同时，它还支持动态生成标题，使得使用更加灵活。