PHPackages                             andrewhaine/silverstripe-webpack-theme - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. andrewhaine/silverstripe-webpack-theme

ActiveSilverstripe-theme[Utility & Helpers](/categories/utility)

andrewhaine/silverstripe-webpack-theme
======================================

Base SilverStripe theme with a webpack build system

2.0.1(7y ago)81511[3 issues](https://github.com/AndrewHaine/silverstripe-webpack-theme/issues)BSD-3-ClauseJavaScript

Since Nov 14Pushed 7y ago4 watchersCompare

[ Source](https://github.com/AndrewHaine/silverstripe-webpack-theme)[ Packagist](https://packagist.org/packages/andrewhaine/silverstripe-webpack-theme)[ RSS](/packages/andrewhaine-silverstripe-webpack-theme/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (4)Dependencies (2)Versions (7)Used By (0)

Base SilverStripe theme with a webpack build system
===================================================

[](#base-silverstripe-theme-with-a-webpack-build-system)

Installation
------------

[](#installation)

### Composer

[](#composer)

This theme can be installed through composer, simply add the following line to your project's composer.json file.

```
require: "andrewhaine/silverstripe-webpack-theme": "~2.0"

```

**If you are installing with composer it is advisable to remove the above option from your composer.json file after the initial installation in order to avoid installing duplicate themes or overriding your changes.**

### Manual Installation

[](#manual-installation)

Copy this theme into a subdirectory of your themes folder.

Usage
-----

[](#usage)

This theme is designed to optimise your production build by minifying assets and optimising images. Any assets referenced (explicitly or implicitly) in index.js will be compiled.

### CSS

[](#css)

This theme supports both SCSS and Sass syntax.

The recommended entry point for all CSS is sass/style.sass, any files imported will be bundled into a single CSS file which can be included in the way you choose (Requirements API, link tag etc..).

The setup will also produce an editor.css file which is used by SilverStripe to style the TinyMCE fields in the CMS, styles imported into sass/editor.sass will be included in this file.

#### Linting

[](#linting)

Linting is available from stylelint for SCSS and Sass files, the rules for the linter can be updated in .stylelintrc.yml. A full list of rules can be found [here](https://stylelint.io/user-guide/rules/).

### JavaScript

[](#javascript)

Javascript is included in the bundle in much the same way as CSS, the entry point for javascript in this theme is javascript/src/main.js.

The theme comes set up for development using ES6 Syntax but this can be adjusted accordingly by installing babel presets and changing the settings in .eslintrc.yml.

### Images

[](#images)

Any images imported into the bundle, either directly or through a URL reference will be optimised, where possible files will be inlined using Data URIs, if an image is above 10kb it will be compressed using the image-webpack-loader and placed in the images directory (Names and extensions are preserved). Images need to be placed in the 'images' directory.

By default image compression is disabled for performance purposes - when the time comes to bundle images for production this can be re-enabled with the `disable` option in `webpack.common.babel.js`.

### Development

[](#development)

In order to use the watch task you will need to tell webpack which url it should proxy when creating the development server - this is the development url you are using for your project. This option can be set in `variables.js`.

The build system uses webpack dev server which allows hot reloading for speedy testing. To start the server run `npm run watch`. The server will start on port 3000 you will also get a nice terminal interface courtesy of [FormidableLabs](https://github.com/FormidableLabs/webpack-dashboard).

With the server started you should then see your site updating live on localhost:3000 when any asset files are changed.

Once development is complete eject your css and minify the bundle using `npm run build`. This will create the main CSS file (css/main.css) and your JS bundle (javascript/dist/main.bundle.js) which can then be included in your templates.

Signature
---------

[](#signature)

The system gives the ability to add a signature to the top of your css and js files, to edit the information shown or disable this feature, edit the options in `variables.js`.

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance13

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~106 days

Total

5

Last Release

2679d ago

Major Versions

1.0.x-dev → 2.0.02018-09-13

### Community

Maintainers

![](https://www.gravatar.com/avatar/86bf4d3dfe55597dfe041bd97488d830a42582e3224f12ad8a002066587d42e6?d=identicon)[andrewhaine](/maintainers/andrewhaine)

---

Top Contributors

[![AndrewHaine](https://avatars.githubusercontent.com/u/16389134?v=4)](https://github.com/AndrewHaine "AndrewHaine (50 commits)")

---

Tags

silverstripethemewebpacksilverstripewebpackwebpack themesilverstripe webpackblank theme

### Embed Badge

![Health badge](/badges/andrewhaine-silverstripe-webpack-theme/health.svg)

```
[![Health](https://phpackages.com/badges/andrewhaine-silverstripe-webpack-theme/health.svg)](https://phpackages.com/packages/andrewhaine-silverstripe-webpack-theme)
```

###  Alternatives

[sheadawson/silverstripe-shortcodable

Provides a GUI for CMS users to insert Shortcodes into the HTMLEditorField + an API for developers to define Shortcodable DataObjects and Views

5018.1k5](/packages/sheadawson-silverstripe-shortcodable)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)