Webpackで小さなWebサイトのhtmlヘッダ作成を自動化するには？

はじめに、はじめに、ダウンロード、FAQのようなページで簡単な静的Webサイトを構築したいと考えています。トップにもナビゲーションリンクがあります。それはどこにでも見られる基本的なレイアウトです。Webpackで小さなWebサイトのhtmlヘッダ作成を自動化するには？

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です。ブートストラップとGulpを使用しない理由は、私が長い間それらを使っていて、他の選択肢を探そうとしていることです。

また、Vue.js/Semantic UI/UIKitを見ると、すべて私にとって全く新しいものです。しかし、Vue.jsはReactとよく似ています。私のウェブサイトは一般的な情報ウェブサイトであり、JSからDOMへのライブアップデートは必要ありません。

出典

2017-11-04 5argon

私はWebpackでエレガントなソリューションを見つけることができました。それはhtml-webpack-pluginです。 JS entryごとに、chunkオプションの別個のHTMLを生成することができます。これは私のページのそれぞれです。

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

各ページはデフォルトテンプレートで生成されます。各ページで一意のファイルEJSで上書きします。共通部分は簡単にテンプレートシステムを作るために、私は、各ページの<%- include otherejs %>を書くことができEJSを使用して

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

。

最後にセットアップすべて.ejsファイルのローダは

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

最初のものはEJSを読み取り、即座にHTMLにそれらをレンダリングすることができます。 ejs-compiled-loaderを使用しないようにしてください。HTMLを出力するために再度呼び出す必要があるテンプレート関数をエクスポートします。 html-loaderは機能を受け入れられません。この規則は、html-webpack-pluginがどうなることhtml-webpack-plugin

最後にもう一つの事は、それがinject:オプションを使ってここであなたがコントロールすることができ、バンドル<script>タグを注入されたため、ローダになります。私はheadを使用します。私のページを隠してからアニメーションを後で再生する必要があるため、DOMの前にスクリプトを準備する必要があります。（スクリプトで私はdocument.addEventListener('DOMContentLoaded',afterLoad)を使用することができました。

私はWebpackのdevサーバからライブリロードしていますので、これは小さなマルチページのWebサイトを開発する方法として非常に満足しています。 Webpack以外の新しいコンセプトを学ぶ必要はありません。（私はJekyllを試したときに、フォルダ構造の規則、フロントマターなどに直面しなければならなかった）

出典

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

Jekyllのような静的サイトジェネレータをお勧めします。それはあなたが（ヘッダーのように）再利用する必要があるウェブサイトの部分を作成することができますし、サイトを構築するときには、すべての部分を一緒に置くでしょう。

私はあなたがWebpackと言ったことは知っていますが、それはではなく、この仕事のためのツールです。 WebpackやGulpと一緒にHTMLをコンパイルしないことを強くお勧めします。それらはSassやJavaScriptのようなものを構築するためのものです。

出典

2017-11-04 03:41:40

Webpackで小さなWebサイトのhtmlヘッダ作成を自動化するには？

答えて

関連する問題