如何使用Webpack自动创建小型网站的html header？ [英] How to automate html header creation of small website with Webpack?
问题描述
我想用简介，入门，下载，FAQ等页面构建一个简单的静态网站。顶部也会有导航链接。这是您随处可见的基本布局。
我所做的一年前只是一个复制和粘贴。所以每个.html页面都有相同的标签代码。
< nav class =text-center> < a href =index.html>简介< / a> | < a href =getting-started.html>入门< / a> | < a href =reference.html>参考< / a> | < a href =demo.html>演示< / a> | < a href =faq.html>常见问题< / a> < span id =get>< a href =https://www.assetstore.unity3d.com/#!/content/51095target =_ blank>获取Introloop< / a>< /跨度> < / nav>
然后有很多头，这几乎是相同的，但每页之间有点不同。
< head>< meta charset =utf-8>< meta http-equiv =X-UA-Compatiblecontent =IE = edge> ;< meta name =viewportcontent =width = device-width，initial-scale = 1>< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3 .6 / css / bootstrap.min.cssintegrity =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名称=关键字内容=Introloop - 轻松播放循环音乐与介绍部分。 （Unity插件）/>< meta charset =utf-8>< meta property =og：titlecontent =Introloop - Demo/>< meta property =og：description content =让我们看看自己的表现如何！>< meta property =og：typecontent =website/>< meta property =og：urlcontent =http：// www.exceed7.com/introloop/demo.html\"/>< meta property =og：imagecontent =http://www.exceed7.com/introloop/img/HeaderImage.png/><< ; meta property =og：site_namecontent =Introloop/>< title> Introloop - 轻松播放循环音乐（Unity插件）< / title>< link rel =stylesheethref = css / main.css>< / head>
阅读一年前我写的代码，我觉得它对可维护性并不好，我正在考虑重做网站，所以我希望目前这样做。但是我似乎无法从Google搜索中获得解决方案，因为它是很难得到正确的海洋rch query ...
当然，我们现在使用某种构建工具，并且对学习Webpack非常感兴趣。我想知道什么是通常的工作流程，使这种小模板网站？
其他工具，我想合并是npm + Babel + cssnext +任何Bootstrap alternatve +没有G，，以防万一它们与可能的解决方案重叠。没有Bootstrap和没有Gulp的原因是，我一直在使用它们很长一段时间，并希望探索其他替代品，我想现在可以使用它们。
看着Vue.js / Semantic UI / UIKit，对我来说都是全新的。但Vue.js看起来太像React了，我的网站只是一个普通的信息网站，似乎并不需要任何活动的JS来更新DOM。我设法用Webpack找到了一个优雅的解决方案。它是 html-webpack-plugin 。对于每个JS 条目，它可以使用 chunk 选项生成单独的HTML。这是我的每一页。
chunks：[page]，
filename：page +.html
使用默认模板生成每个页面。我将用自己的 EJS 文件覆盖每个页面。
template：path /+ page +.ejs
使用EJS我可以在每个页面上为公共部分编写一个<％ - include otherejs％> 来轻松创建模板系统。 p>
最后为所有 .ejs 文件设置加载程序为
test：/\.ejs$/，
use：['html-loader'，'ejs-html-loader']
第一个读取EJS并立即将它们呈现为HTML。请确保不要使用 ejs-compiled-loader ，因为该导出模板功能需要再次调用以输出HTML。 html-loader 无法接受函数。这个规则将成为 html-webpack-plugin
的一个加载器。最后一件事是 html-webpack-plugin 会做的是注入< script> 标签，你可以通过注入：选项。我使用 head ，因为我需要隐藏我的页面，然后再播放动画，我需要在DOM之前准备脚本。 （然后在脚本中，我可以使用 document.addEventListener（'DOMContentLoaded'，afterLoad）。
从Webpack的开发服务器重新加载，所以我非常满意这种方式来开发一个小型的多页面网站，同样也是JS-ish，我不需要学习除Webpack以外的任何新概念。我试过Jekyll，我不得不面对文件夹结构规则，前端问题等）。
I want to build a simple static website with pages like Introduction, Getting Started, Download, FAQ. There would be a navigation links at the top too. It's the basic layout you see everywhere.
What I have done a year ago is just a copy and paste. So every .html page would have the same tab code.
<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>
And then there are a lot of heads, that is almost the same but a little bit different from page to page.
<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>
Reading the code I wrote a year ago I feel like it's not good for maintainability. I am considering redoing the site so I would like the current state of doing this. But I can't seems to get the solution from Google search because it is difficult to get the correct search query...
Surely nowadays we use some kind of build tools and I am very interested in learning Webpack. I am wondering what is the usual workflow to make this kind of a small templated website?
Other tools I would like to incorporate is npm + Babel + cssnext + any Bootstrap alternatve + no Gulp, just in case they overlap with the possible solution. The reason for no Bootstrap and no Gulp is that I have been using them for long time and would like to explore other alternatives, which I guess would be available by now
Also looking at Vue.js / Semantic UI / UIKit, all completely new to me. But Vue.js looks too much like React, which my website is just a general information website and does not seems to need any live JS to DOM update..
I managed to find an elegant solution with Webpack. It's html-webpack-plugin. For each JS entry it could generate a separate HTML with chunk option. This would be each of my page.
chunks: [page],
filename: page + ".html"
Each page would be generated with a default template. I will override it with my own EJS file that is unique for each page.
template: "path/" + page + ".ejs"
Using EJS I could write an <%- include otherejs %> on each page for common parts to make a template system easily.
Finally setup the loader for all .ejs file to be
test: /\.ejs$/,
use: ['html-loader','ejs-html-loader']
The first one reads EJS and immediately renders them to HTML. Make sure not to use ejs-compiled-loader as that one exports a template funtion that needs to be called again to output HTML. html-loader cannot accept a function. This rule will be a loader for html-webpack-plugin
One final thing that html-webpack-plugin will do is injecting the bundle <script> tag which you could control where it is via inject: option. I use head because I need to hide my page and then play an animation later, I need to have the script ready before the DOM. (Then in script I could use document.addEventListener('DOMContentLoaded',afterLoad).
I also got live reloading from Webpack's dev server so I am very content with this as a way to develop a small multi-page website. Also it's quite JS-ish, it's good that I don't have to learn any new concept other than Webpack. (When I tried Jekyll I had to face with folder structures rules, front matter, etc.)
这篇关于如何使用Webpack自动创建小型网站的html header？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
