如何使用 Webpack 自动创建小型网站的 html 标头？答案

【问题标题】：How to automate html header creation of small website with Webpack?如何使用 Webpack 自动创建小型网站的 html 标头？
【发布时间】：2017-11-04 03:26:48
【问题描述】：

我想建立一个简单的静态网站，其中包含简介、入门、下载、常见问题解答等页面。顶部也会有一个导航链接。这是随处可见的基本布局。

What I have done a year ago 只是复制和粘贴。所以每个 .html 页面都会有相同的标签代码。

<nav class="text-center">
    <a href="index.html">Introduction</a> |
    <a href="getting-started.html">Getting Started</a> |
    <a href="reference.html">Reference</a> | 
    <a href="demo.html">Demo</a> |
    <a href="faq.html">FAQ</a>
    <span id="get"><a href="https://www.assetstore.unity3d.com/#!/content/51095" target="_blank">Get Introloop</a></span>
    <br>
</nav>

然后还有很多头像，几乎一样，但每一页都有点不同。

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>

<meta name="keywords" content="Introloop - Easily play looping music with intro section. (Unity plugin)"/>

<meta charset="utf-8">
    <meta property="og:title" content="Introloop - Demo"/>
    <meta property="og:description" content="Let's see how well it performs by yourself!">
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="http://www.exceed7.com/introloop/demo.html"/>
    <meta property="og:image" content="http://www.exceed7.com/introloop/img/HeaderImage.png"/>
    <meta property="og:site_name" content="Introloop" />

    <title>Introloop - Easily play looping music with intro section (Unity Plugin)</title>
    <link rel="stylesheet" href="css/main.css">
</head>

阅读我一年前写的代码，我觉得它不利于可维护性。我正在考虑重做这个网站，所以我想要目前的状态。但我似乎无法从 Google 搜索中获得解决方案，因为很难获得正确的搜索查询...

现在我们肯定会使用某种构建工具，我对学习 Webpack 非常感兴趣。我想知道制作这种小型模板网站的通常工作流程是什么？

我想合并的其他工具是 npm + Babel + cssnext + 任何 Bootstrap 替代方案 + 没有 Gulp，以防它们与可能的解决方案重叠。没有 Bootstrap 和 Gulp 的原因是我已经使用它们很长时间了，并且想探索其他替代方案，我想现在可以使用它们

还查看了 Vue.js / Semantic UI / UIKit，对我来说都是全新的。但是 Vue.js 看起来太像 React，我的网站只是一个通用信息网站，似乎不需要任何实时 JS 到 DOM 更新..

【问题讨论】：

标签： html

【解决方案1】：

我会推荐像Jekyll 这样的静态网站生成器。它将允许您创建应重复使用的网站部分（如标题），并且在您构建网站时，它将所有部分放在一起。

我知道你说的是 Webpack，但它不是完成这项工作的工具。我强烈建议不要将 HTML 与 Webpack 甚至 Gulp 一起编译。这些是用于构建 Sass 和 JavaScript 之类的东西。

【讨论】：

【解决方案2】：

我设法用 Webpack 找到了一个优雅的解决方案。这是html-webpack-plugin。对于每个 JS entry，它可以使用 chunk 选项生成单独的 HTML。这将是我的每个页面。

chunks: [page],
filename: page + ".html"

每个页面都将使用默认模板生成。我将用我自己的 EJS 文件覆盖它，该文件对于每个页面都是唯一的。

template: "path/" + page + ".ejs"

使用EJS我可以在每个页面上写一个<%- include otherejs %>用于公共部分，以便轻松制作模板系统。

最后为所有.ejs文件设置加载器

test: /\.ejs$/, 
use: ['html-loader','ejs-html-loader']

第一个读取 EJS 并立即将它们呈现为 HTML。确保不要使用ejs-compiled-loader，因为它会导出需要再次调用以输出 HTML 的模板函数。 html-loader 不能接受函数。此规则将成为 html-webpack-plugin 的加载器

html-webpack-plugin 要做的最后一件事是注入捆绑包<script> 标签，您可以通过inject: 选项控制它的位置。我使用head，因为我需要隐藏我的页面，然后稍后播放动画，我需要在 DOM 之前准备好脚本。（然后在脚本中我可以使用document.addEventListener('DOMContentLoaded',afterLoad)。

我还从 Webpack 的开发服务器获得了实时重新加载，因此我非常满意这种方式来开发小型多页网站。而且它非常 JS-ish，我不必学习 Webpack 以外的任何新概念，这很好。（当我尝试 Jekyll 时，我不得不面对文件夹结构规则、前端问题等）

【讨论】：