HTML启动器

live-reload-vanilla-website-template — HTML 启动器模板

作者 esausilva

一个不依赖前端框架的网站启动模板，用 Webpack 支持 ES6+ 转译、ES Modules 与 Sass，并提供开发时的浏览器实时刷新。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

不引入前端框架，以原生 HTML 为页面基础

02

开发时监听 ./src 并在浏览器中实时刷新

03

支持 ES6+ 转译与 ES Modules 写法

04

支持 Sass 编译，生产构建时压缩并自动加前缀

05

生产构建输出到 ./public/assets，可直接部署 ./public 目录

模板详细介绍

该模板面向希望用原生 HTML 构建网站、但不想放弃现代工具链的开发者。它不使用前端框架，而是通过 Webpack 处理源码：开发时监听 ./src 目录变化，将打包产物输出到 ./public/assets，同时开发服务器监听 ./public 目录并在浏览器中实时刷新；生产构建时对 Sass 做编译、压缩与自动加前缀，对 JavaScript 做压缩与混淆，产物同样输出到 ./public/assets，之后可直接部署 ./public 目录。

功能范围集中在构建与开发体验：ES6+ 转译、ES Modules、Sass 编译，以及开发环境的 live reload。仓库 README 提供了 yarn 安装依赖、yarn dev 启动开发服务器（默认打开 http://localhost:8080/public）、yarn build 生成生产包三条命令，并链接到作者博客的逐步搭建教程。

使用前需注意：模板本身不包含 UI 组件库或页面设计系统，页面结构与样式需自行编写；仓库未提供依赖版本锁定说明，实际工具版本以安装时为准；演示截图来自作者博客页面，其中的图片、字体、图标等第三方素材需按各自许可单独核对，不能仅凭代码的 MIT 许可判断。

HTML启动器

适合你的项目吗？

适用场景

  • 用原生 HTML、CSS 和 JavaScript 搭建静态网站或营销页面
  • 在无框架项目中引入 Webpack 构建流程与实时刷新
  • 需要 Sass 预处理和 ES6+ 语法转译的小型前端项目
  • 作为学习现代前端工具链的练手模板

适合人群

  • 希望保持无框架、纯 HTML 技术栈的开发者
  • 需要 Sass 与 ES6+ 转译但不需要组件框架的项目
  • 想参考 Webpack 配置与实时刷新实现方式的学习者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    使用 yarn 安装依赖

  2. 2

    运行 yarn dev 启动开发服务器，默认打开 http://localhost:8080/public

  3. 3

    运行 yarn build 生成生产包，产物位于 ./public/assets

  4. 4

    部署时直接使用构建后的 ./public 目录

  5. 5

    演示页面中的图片、字体、图标等第三方素材需按各自许可核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文
https://github.com/esausilva/live-reload-vanilla-website-template/blob/master/LICENSEhttps://github.com/esausilva/live-reload-vanilla-website-template/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 72 / 100
技术栈
HTML
网站类型
启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2023-01-31
截图检查日期
2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: b9fad866cd5ae0a368257ff8b3f601d6971e6f1d1b462eeb380ca63ce04928ad

2026-10-02T19:51:52.457Z

来源文件 / 仓库
# live-reload-vanilla-website-template

Starter template to build a website without a front-end framework but making use of Webpack to support writing modern JavaScript (ES6+), including ES Modules and Sass.

## Features

- Live reload in development
- Webpack
- Sass compilation (and minification/autoprefixing in production)
- ES6+ transpilation (and minification/uglyfication in production)
- ES Modules

## Usage

- Install dependencies

```
yarn
```

- Run development server

```
yarn dev
```

Will open your default browser to http://localhost:8080/public

Webpack will watch for changes in the `./src` directory and output the bundled assets to `./public/assets`. In parallel, the development server will watch for changes in the `./public` directory and live reload the browser.

- Build production bundles

```
yarn build
```

Will compile, minify and autoprefix Sass to CSS. Will Minify and uglify JavaScript and output the bundled assets to `./public/assets`.

After building for production you can take the `./public` directory and deploy it.

## Tutorial

Visit my [blog entry](https://esausilva.com/2018/09/17/build-a-website-with-modern-tooling-and-no-frameworks/) where I go step-by-step on how to build this template from scratch.

## Giving Back

If you would like to support my work and the time I put into making tutorials, consider getting me a coffee by clicking on the image below. I would really appreciate it!

[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/black_img.png)](https://www.buymeacoffee.com/esausilva)

-Esau Silva
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

startbootstrap-simple-sidebar

startbootstrap-simple-sidebar

An off canvas sidebar navigation Bootstrap HTML template created by Start Bootstrap

HTML · 启动器

adminkit

adminkit

AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5

HTML · 后台

Landing-Page

Landing-Page

Tailwind CSS Starter Template - Landing Page

HTML · 企业官网

light-bootstrap-dashboard

light-bootstrap-dashboard

Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple.

HTML · 后台

sing-app

sing-app

💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥

HTML · 后台

startbootstrap-modern-business

startbootstrap-modern-business

A multipurpose Bootstrap full website template created by Start Bootstrap

HTML · 启动器