Svelte Webpack Mpa screenshot

Svelte Webpack Mpa

Author Avatar Theme by Brandonxiang
Updated: 21 Mar 2023
23 Stars

A template to create multi-page application powered by webpack

Categories

Overview

The svelte-webpack-mpaBoilerplate is a template designed specifically for creating multi-page applications (MPA). It is recommended to use this template for MPA projects and for single-page application (SPA) projects, a different template called template-webpack or webpack_svelte should be used instead.

Features

  • Built for multi-page applications (MPA)
  • Easy project creation using degit
  • Allows placement of static files in the public folder
  • Each page has its own JS bundle
  • Includes svelte-preprocess for customizing the Svelte API
  • Includes Postcss for autoprefixer
  • Can be integrated with Visual Studio Code (VSCode)
  • Official integrations available
  • Does not require Babel

Installation

To use this template, follow these steps:

  1. Create a new project based on this template using degit.
npx degit <template-repo> my-app
cd my-app
  1. Place the static files in the public folder.
  2. Access the development server at http://localhost:9000/page1.html for the first page and http://localhost:9000/page2.html for the second page.
  3. For building the project, the common chunk for multi-pages is unnecessary due to the small bundle size of Svelte App. Each page has its own JS bundle. You can customize the webpack config if needed.
  4. Customize the Svelte API using svelte-preprocess. Other style preprocessors like Sass can also be added.
  5. To integrate with VSCode, follow the official integrations guide.
  6. The template is licensed under MIT.

Summary

The svelte-webpack-mpaBoilerplate is a useful template for building multi-page applications (MPA) using the Svelte framework. It provides key features such as separate JS bundles for each page, integration with preprocessors for customization, and an option to integrate with Visual Studio Code. The template is easy to install and offers a smooth development experience.