Svelte Webpack Starter

This is my personal starter template for creating Svelte apps. It's preconfigured out of the box with Webpack, TypeScript, SASS, Babel, Autoprefixer, and hot module replacement. I've kept it minimal and organized so it's easy to build upon and/or customize.

Getting started
Usage

Getting started

Installation

To quickly get started with this template, use degit:

npx degit baileyherbert/svelte-webpack-starter svelte-app
cd svelte-app

Then, install dependencies.

npm install

Starting the development server

The dev script will compile the app, start the development server, and enable hot replacement for components and styles. Open http://localhost:8080 in your browser to see the app.

npm run dev

Building for production

The build script will compile the app for production. By default, the bundle will be created at /public/build/, which means your public directory will contain everything you need to run the app.

npm run build

To run the production build, use the start command and open http://localhost:8080 in your browser.

npm run start

Usage

Global styles

The /src/styles/index.scss file will be compiled and embedded at the top of the bundled CSS, effectively making it a global stylesheet. You can easily add additional stylesheets to the bundle by editing the stylesheets variable at the top of webpack.config.js:

const stylesheets = [
    './src/styles/index.scss'
];

Single page applications

If you're building a single page application (which needs multiple routes), edit your package.json file:

Add the --history-api-fallback flag to the "dev" command
Add the --single flag to the "start" command.

"scripts": {
    "dev": "webpack-dev-server [...] --history-api-fallback",
    "start": "serve [...] --single",
}

Targeting browsers

Babel and Autoprefixer will be used to make bundles work in your target browsers, which are listed under browserslist in your package.json file. Check out the list of browserslist queries to customize this.

{
    "browserslist": [
        "defaults"
    ]
}

Note that Babel is only active for production builds by default, so it won't slow down your development.

Disabling Babel

If you don't need to support older browsers, you can reduce your bundle size by disabling Babel. Just change the useBabel variable at the top of webpack.config.js:

const useBabel = false;

Enabling source maps in production

By default, this template won't generate source maps for production bundles in order to avoid exposing your source code. If you need to enable source maps in production (such as for debugging), update the sourceMapsInProduction variable at the top of webpack.config.js.

const sourceMapsInProduction = true;

Path mapping

By default, the src alias is mapped to your src/ directory, which means you can import like this:

import Navbar from 'src/components/Navbar.svelte';

If you wish to add additional aliases, you only need to edit the paths property in your tsconfig.json, and they will be automatically applied to Webpack:

"paths": {
    "src": ["src"]
}

wobedi/svelte-webpack-starter