Question

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

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 alternatve + no Gulp，以防它们与可能的解决方案重叠。没有Bootstrap和没有Gulp的原因是我已经使用了很长时间并且想要探索其他替代方案，我想现在可以使用

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

Answer 1

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

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

Answer 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时，我不得不面对文件夹结构规则，前面的事情等。）

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

2 个答案: