Svelte Rollup Template
svelte-rollup-template
Svelte Rollup template with file name hashing and HTML minification.
This template supplements the official Svelte Rollup template by hashing CSS/JS file names when building for production.
This set-up is a solution for a GitHub issue about hashing file names. See rollup.config.js for how this is done.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Svelte Rollup Template</title>
- <link rel="stylesheet" href="bundle.[hash].css">
+ <link rel="stylesheet" href="bundle.8cafcc832f6eac1fd04a.css">
</head>
<body>
- <script src="bundle.[hash].js"></script>
+ <script src="bundle.f03bbb7cae8df0138056.js"></script>
</body>
</html>
This project uses PostHTML to process compiled assets after the build stage.
Quick Start
Scaffold a new project using degit:
npx degit metonym/svelte-rollup-template svelte-app
cd svelte-app
npm install
Available Scripts
npm run dev
Runs the app in development mode. Visit http://localhost:3000 to view the app.
Customize the port number in rollup.config.js.
serve({
contentBase: [OUT_DIR],
- port: 3000
+ port: 8080
})
npm run build
Builds the app for production.
The output is written to the build directory. This folder should not be committed to version control.
PostHTML is executed in a custom Rollup plugin that taps into the writeBundle hook.
posthtml-hash hashes the filenames of bundle.css and bundle.js.
License
