使用 webpack 或类似工具快速制作原型

Question

我想知道是否有可用于加速静态 html 和 css 开发的快速原型制作工具。

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

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

我想知道我是否可以使用 webpack 实现这一点。

• 我将有 1 html 个文件/页面
• 在每个 html 文件中，我需要包含来自其他静态文件的 html 片段
• 我需要 LESS 编译（我可以用 webpack 做到这一点）
• 我还需要为 css 热重载（这很简单）
• 当我更改 html 片段（例如页眉页脚）时，我还需要热重载才能工作我需要重新加载整个页面

有什么东西可以用来做这个吗？

感谢观看

Answer 1

使用 HTML Webpack Plugin 和您选择的支持 fragments/partials 的模板引擎。

查看 HTML Webpack 插件的 The template option。

Answer 2

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

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

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

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

编辑 我不是建议构建你自己的工具，而是建议你自己定制的工具套件