如何使用Webpack自動創建小型網站的html header？

我想用簡介，入門，下載，FAQ等頁面構建一個簡單的靜態網站。頂部也會有導航鏈接。這是你到處看到的基本佈局。如何使用Webpack自動創建小型網站的html header？

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 /語義UI/UIKit，對我來說都是全新的。但Vue.js看起來太等反應，這我的網站只是一個一般的信息網站和似乎並不需要任何活動JS到DOM更新..

來源

2017-11-04 5argon

我設法找到了一個優雅的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十歲上下，這是很好的我不需要學習除Webpack以外的任何新概念（當我嘗試Jekyll時，我不得不面對文件夾結構規則，前端問題等）

來源

2017-11-04 18:16:49 5argon

我會建議一個靜態的網站發生器像Jekyll。它將允許您創建應該重用的網站部分（如標題），並且在構建網站時，它會將所有部分放在一起。

我知道你說的是webpack，但那是而不是這個工作的工具。我強烈建議不要與Webpack甚至Gulp一起編譯HTML。這些用於構建Sass和JavaScript之類的東西。

來源

2017-11-04 03:41:40

如何使用Webpack自動創建小型網站的html header？

回答

相關問題