# HtmlWebpackPlugin

# 1. 说明

HtmlWebpackPlugin 是 webpack 的插件，

用于生成 HTML 页面，

webpack 编译出来的 bundle 会注入该 HTML 页面。

HTML 模板默认使用 lodash 的模板引擎。

# 2. 使用

# 2.1. `webpack.config.js`

module.exports = {
  entry: {
    main: './src/main.js',
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      chunks: ['main'],
      inject: false,
      template: path.resolve(__dirname, './src/index.html'),
    }),
  ]
};

# 2.2. `./src/index.html`

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>首页</title>

  <% for (var cssName in htmlWebpackPlugin.files.css) { %>
  <link href="<%=htmlWebpackPlugin.files.css[cssName] %>" rel="stylesheet">
  <% } %>

</head>
<body>

<div id="hlhzApp"></div>

<!--
<pre>
  <%= JSON.stringify(htmlWebpackPlugin, null, 4) %>
</pre>
-->

<% for (var jsName in htmlWebpackPlugin.files.js) { %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.js[jsName] %>" defer></script>
<% } %>
</body>
</html>

# 2.3. 模板数据

{
    "tags": {
        "headTags": [
            {
                "tagName": "script",
                "voidTag": false,
                "meta": {
                    "plugin": "html-webpack-plugin"
                },
                "attributes": {
                    "defer": true,
                    "src": "runtime/runtime.js"
                }
            },
            {
                "tagName": "script",
                "voidTag": false,
                "meta": {
                    "plugin": "html-webpack-plugin"
                },
                "attributes": {
                    "defer": true,
                    "src": "vendors/vendors.js"
                }
            },
            {
                "tagName": "script",
                "voidTag": false,
                "meta": {
                    "plugin": "html-webpack-plugin"
                },
                "attributes": {
                    "defer": true,
                    "src": "main/main.js"
                }
            },
            {
                "tagName": "link",
                "voidTag": true,
                "meta": {
                    "plugin": "html-webpack-plugin"
                },
                "attributes": {
                    "href": "main/main.css",
                    "rel": "stylesheet"
                }
            }
        ],
        "bodyTags": []
    },
    "files": {
        "publicPath": "",
        "js": [
            "runtime/runtime.js",
            "vendors/vendors.js",
            "main/main.js"
        ],
        "css": [
            "main/main.css"
        ]
    },
    "options": {
        "template": "D:\\dev\\projects\\hlhz_platform\\node_modules\\html-webpack-plugin\\lib\\loader.js!D:\\dev\\projects\\hlhz_platform\\src\\index.html",
        "templateContent": false,
        "filename": "index.html",
        "publicPath": "auto",
        "hash": false,
        "inject": false,
        "scriptLoading": "defer",
        "compile": true,
        "favicon": false,
        "minify": "auto",
        "cache": true,
        "showErrors": true,
        "chunks": [
            "main"
        ],
        "excludeChunks": [],
        "chunksSortMode": "auto",
        "meta": {},
        "base": false,
        "title": "Webpack App",
        "xhtml": false
    }
}

# 3. 参考

本章目录

# HtmlWebpackPlugin

# 1. 说明

# 2. 使用

# 2.1. webpack.config.js

# 2.2. ./src/index.html

# 2.3. 模板数据

# 3. 参考

# 2.1. `webpack.config.js`

# 2.2. `./src/index.html`