使用 html-webpack-plugin 生成 HTML-JavaScript中文网-JavaScript教程资源分享门户

前言

在 web 开发中，生成 HTML 是必不可少的一部分。如果你使用 webpack 来构建项目，那么你可以使用 html-webpack-plugin 这个插件来帮助你生成 HTML 文件。它可以自动生成包含所有入口文件（JS、CSS等）的 HTML 文件。

安装

在使用 html-webpack-plugin 之前，你需要先安装它。

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

配置

基本配置

在 webpack.config.js 中配置 html-webpack-plugin。下面是一个简单的示例。

-- -------------------- ---- -------
----- ----------------- - -------------------------------
-
-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- --------- - -------
  --
  -------- -
    --- -------------------
  -
--

这个配置的作用是在 dist 目录下自动生成一个 index.html 文件。

高级配置

html-webpack-plugin 提供了很多自定义选项，下面是一些常用选项的说明和示例。

template

指定生成的 HTML 文件所使用的模板文件。

new HtmlWebpackPlugin({
  template: 'src/index.ejs'
})

这里使用了一个 EJS 模板文件。你也可以使用其他模板文件，如 PUG、Handlebars 等。

filename

指定生成的 HTML 文件名。

new HtmlWebpackPlugin({
  filename: 'my-index.html'
})

title

指定生成的 HTML 文件中的标题。

new HtmlWebpackPlugin({
  title: 'My App'
})

chunks

指定页面所包含的 chunk。

new HtmlWebpackPlugin({
  chunks: ['main', 'vendors']
})

这个示例中，生成的 HTML 文件只包含名为 main 和 vendors 的两个 chunk。

minify

压缩生成的 HTML 文件。

new HtmlWebpackPlugin({
  minify: {
    collapseWhitespace: true,
    removeComments: true
  }
})

这里使用了一些常用的压缩选项，如去除空格和注释等。

使用 HTML 模板

html-webpack-plugin 可以根据指定的 HTML 模板生成 HTML 文件。这样你可以在 HTML 模板文件中添加自己的内容，同时还可以使用各种模板语言。下面是一个简单的 HTML 模板示例。

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ---------- ------------------------------- ----------
  -------
  ------
    ---- ----------------
    -- -- --------------------- --- ------------- - --
      ------- ----------------------------------------------------
    -- - --
    ------- -------- ----------------------------------------- -------------
  -------
-------

在这个模板里，你可以使用各种模板语言和逻辑，如 EJS、PUG、Handlebars 和 JavaScript 等。插件会根据这个模板文件和其他配置生成最终的 HTML 文件。

结论

html-webpack-plugin 是一个非常实用的插件。它可以帮助你自动生成 HTML 文件，并且提供了很多自定义选项。使用它可以让你更加高效地进行 web 开发。

参考链接

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67341d000bc820c58246a5c1

使用 html-webpack-plugin 生成 HTML

前言

安装

配置