HtmlWebpackPlugin

HtmlWebpackPlugin 简化了用于提供 webpack 打包文件的 HTML 文件的创建。这对于文件名中包含哈希值的 webpack 打包文件特别有用,因为每次编译时哈希值都会改变。你可以让插件为你生成 HTML 文件,使用 lodash 模板提供自己的模板,或者使用自己的 加载器

安装

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

基本用法

该插件将为你生成一个 HTML5 文件,其中使用 script 标签在 body 中包含你所有的 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 入口点,它们都将使用 <script> 标签包含在生成的 HTML 中。

如果你的 webpack 输出中有任何 CSS 资源(例如,使用 MiniCssExtractPlugin 提取的 CSS),那么它们将使用 <link> 标签包含在生成的 HTML 的 <head> 元素中。

配置

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

第三方附加组件

此插件支持附加组件。有关列表,请参阅文档

4 贡献者

ampedandwiredsimon04Sibiraj-SEugeneHlushko