使用webpack或类似的

Question

我想知道是否有一个快速原型制作工具可以用来加速静态html和CSS开发。

我的工作流程通常是在编程前先构建html和css。 我通常一个接一个地构建页面，并将常用元素分成包含以保持干燥。

在过去，我使用PHP或其他东西将所有内容包含在一起。

我想知道我是否可以通过webpack实现这一目标。

• 我将有1个html文件/页
• 在每个html文件中，我需要包含来自其他静态文件的html fragements
• 我需要少量编译（我可以用webpack执行此操作）
• 我还需要热重载css（这很容易）
• 当我更改html片段（例如页脚标题）时，我还需要热重载才能工作我需要重新加载整个页面

我可以用它来做这件事吗？

感谢您寻找

Answer 1

使用HTML Webpack Plugin和您选择的支持片段/部分的模板引擎。

查看HTML Webpack插件的The template option。

Answer 2

如果您对此有很多需求，也许您应该构建自己的工具 适合您的需求。

您可以考虑以下一些可能的选项：

• express和一些模板引擎（pug或mustache）
根据@floriangosse 的建议，
• webpack使用HTML插件
• grunt或gulp带有观察者插件，用于编辑模板和样式表
• browserSync用于在浏览器中重新加载内容

我会选择webpack，因为它提供了很多这样的功能 盒子（+装载机）。我发现创建一个小型存储库是有帮助的，它包含dev，生产和你可以继承的一些基本配置的webpack配置，一个包含你的html和npm脚本的公共文件夹或一些用于启动它的gulp / grunt文件。

编辑我不是建议您构建自己的工具，而是建立自己的自定义工具套件