PHPackages sunnysideup/sswebpack\_engine\_only - 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. sunnysideup/sswebpack\_engine\_only ActiveSilverstripe-theme[Utility & Helpers](/categories/utility) sunnysideup/sswebpack\_engine\_only =================================== Webpack engine for Silverstripe without any theme at all. Use this with any theme / module you are building. You can also use it without SilverStripe at all. 19.0.1(2w ago)33.8k↑40%220BSD-3-ClauseJavaScript Since Aug 28Pushed 2w ago3 watchersCompare [ Source](https://github.com/sunnysideup/silverstripe-sswebpack_engine_only)[ Packagist](https://packagist.org/packages/sunnysideup/sswebpack_engine_only)[ RSS](/packages/sunnysideup-sswebpack-engine-only/feed)WikiDiscussions main Synced 2w ago READMEChangelog (5)DependenciesVersions (92)Used By (20) Base SilverStripe theme with a webpack build system =================================================== [](#base-silverstripe-theme-with-a-webpack-build-system) A drop-in webpack build engine for SilverStripe that can compile the front-end assets of **any** theme or vendor package from one place. It is powered by [Symfony Encore](https://www.npmjs.com/package/@symfony/webpack-encore). --- Requirements ------------ [](#requirements) - A recent **Node.js** and **npm**. Using [nvm](https://github.com/nvm-sh/nvm)is recommended — the helper script below will automatically pick up your nvm node if it is installed. - **npm 12+ note:** you can no longer pass build options as `--flags` to `npm run` (npm 12 rejects unknown flags). This engine passes everything as environment variables instead. The `webpack` helper script does this for you. --- Installation ------------ [](#installation) 1. Install this module into your `themes/` folder as `sswebpack_engine_only`(Composer does this automatically). 2. Create the front-end files for your theme — see the [`examples-from-root-of-project`](https://github.com/sunnysideup/silverstripe-sswebpack_engine_only/blob/master/examples-from-root-of-project)folder for the exact files you need. 3. Expose your theme's `dist` folder in the public resources folder via Composer, as usual. 4. Install dependencies: ``` vendor/bin/webpack install ``` > **Tip:** add the helper to your `PATH` or create an alias so you can just type `webpack …` from your project root: > > ``` > alias webpack='./vendor/bin/webpack' > ``` > > > > The examples below assume you have done this. Always run it from the **base folder of your project**. --- Usage ----- [](#usage) ``` webpack [theme-dir] ``` CommandWhat it does`install`Install engine deps **and** the theme's project modules`hot`Dev build served with **hot reloading** (CSS hot-injection)`watch`Dev build, rebuilt on every save (to disk, no browser integration)`build`Production build`theme-dir` is optional. If omitted, the first folder under `./themes/` that contains `src/main.js` is used (the engine folder is skipped). A theme can live anywhere: ``` webpack watch # auto-detect a theme webpack build themes/mytheme webpack build vendor/myvendor/mypackage/client ``` ### Calling npm directly (advanced) [](#calling-npm-directly-advanced) If you bypass the helper, run npm from inside the engine folder and pass the theme as an **environment variable**, not a flag: ``` cd themes/sswebpack_engine_only WEBPACK_THEME_DIR=themes/mytheme npm run build # ✅ works npm run build --theme_dir=themes/mytheme # ❌ fails on npm 12 ``` --- Hot reloading (`webpack hot`) ----------------------------- [](#hot-reloading-webpack-hot) `hot` runs the Encore dev-server with **CSS hot-injection**: save a `.scss` file and the styles update in the browser with no page reload. The dev-server writes its bundles to disk at your theme's `dist/` path, so your existing hardcoded `` includes keep working unchanged. A couple of things to know: - **The `main.css` ``.** While `hot` is running there is no separate `main.css` — the CSS is injected from the JS. Gate that one `` behind a dev-server flag in your template (or accept a harmless 404 in dev). - **https dev sites.** If your SilverStripe dev site runs over `https`, the browser blocks the `ws://localhost:8080` HMR socket as mixed content. Serve the dev site over plain `http`, or switch the dev-server to https. - **Fallback.** If hot reloading misbehaves, run `webpack watch` instead — it just rebuilds to disk and you refresh the browser yourself. Or force a full-page reload with `WEBPACK_HMR=no webpack hot`. --- Options ------- [](#options) Set these as environment variables **before** the command: VariableDefaultPurpose`WEBPACK_INCLUDE_JQUERY=no`jQuery includedExclude jQuery from the bundle`WEBPACK_JS_FILE``src/main.js`JS entry point`WEBPACK_CSS_FILE``src/style.scss`CSS entry point`WEBPACK_EDITOR_FILE``src/editor.scss`Editor (TinyMCE) CSS entry point`WEBPACK_DIST_DIR``/dist`Output folder`WEBPACK_NODE_DIR``/my_node_modules`Extra node\_modules location`WEBPACK_HMR=no`on`hot` only: full reload vs hot-inject`WEBPACK_DEV_HOST``localhost``hot` only: dev-server host`WEBPACK_DEV_PORT``8080``hot` only: dev-server portExample: ``` WEBPACK_INCLUDE_JQUERY=no webpack build vendor/myvendor/mypackage/client ``` --- Good to know ------------ [](#good-to-know) ### Required structure [](#required-structure) Your theme name can be anything (`mytheme` is just an example), and this works on vendor packages too. Each buildable theme needs: ``` mytheme/ ├── src/ │ ├── main.js # JS entry — import your other JS/SCSS from here │ ├── style.scss # CSS entry │ └── editor.scss # optional: TinyMCE editor styles ├── dist/ # compiled output (expose this via Composer) └── my_node_modules/ # optional: extra npm packages (with its own package.json) ``` - `main.js` and `style.scss` are the entry points — everything else is imported from them. - To add extra npm packages for a theme, put a `package.json` in `mytheme/my_node_modules/` (or in `mytheme/src/`) and run `npm init -y && npm install` there. `webpack install` will pick up `my_node_modules/`automatically. ### jQuery [](#jquery) - jQuery is aliased, so you can use it anywhere without importing it. - It is also exposed on the global namespace (`window.jQuery`). - Turn it off entirely with `WEBPACK_INCLUDE_JQUERY=no`. ### Editor file [](#editor-file) There is an option to compile a separate editor stylesheet (`src/editor.scss`) for your TinyMCE HTML editor. Run any build command and the report at the top of the output shows which entry points were picked up. ### Including the build files in your templates [](#including-the-build-files-in-your-templates) Two options: 1. **Automatically** — add [`sunnysideup/webpack_requirements_backend`](https://github.com/sunnysideup/silverstripe-webpack_requirements_backend)via Composer and follow its docs to inject the required files. 2. **Manually** — reference the compiled files from the exposed `dist` folder, for example: ``` ``` (Remember to gate the `main.css` link when running `webpack hot` — see the hot-reloading section above.) ### Health Score 60 — FairBetter than 98% of packages Maintenance96 Actively maintained with recent releases Popularity26 Limited adoption so far Community31 Small or concentrated contributor base Maturity79 Established project with proven stability Bus Factor1 Top contributor holds 90.4% 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 ~38 days Recently: every ~0 days Total 85 Last Release 20d ago Major Versions 15.0.0 → 16.0.02025-01-03 16.0.2 → 17.0.02025-01-15 6.x-dev → 18.0.02026-04-28 18.0.8 → 19.0.02026-07-26 5.x-dev → 19.0.12026-07-28 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/167154?v=4)[Sunny Side Up](/maintainers/sunnysideup)[@sunnysideup](https://github.com/sunnysideup) --- Top Contributors [![sunnysideup](https://avatars.githubusercontent.com/u/167154?v=4)](https://github.com/sunnysideup "sunnysideup (348 commits)")[![a2nt](https://avatars.githubusercontent.com/u/672794?v=4)](https://github.com/a2nt "a2nt (14 commits)")[![LABCAT](https://avatars.githubusercontent.com/u/9105153?v=4)](https://github.com/LABCAT "LABCAT (8 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")[![sunnysideupdevs](https://avatars.githubusercontent.com/u/20271919?v=4)](https://github.com/sunnysideupdevs "sunnysideupdevs (6 commits)")[![snyk-bot](https://avatars.githubusercontent.com/u/19733683?v=4)](https://github.com/snyk-bot "snyk-bot (1 commits)")[![anoof-ssu](https://avatars.githubusercontent.com/u/211270832?v=4)](https://github.com/anoof-ssu "anoof-ssu (1 commits)") --- Tags silverstripecmsSilverstripe-CMSwebpackfront-end frameworkwebpack themesilverstripe webpackblank theme ### Embed Badge ![Health badge](/badges/sunnysideup-sswebpack-engine-only/health.svg) ``` [![Health](https://phpackages.com/badges/sunnysideup-sswebpack-engine-only/health.svg)](https://phpackages.com/packages/sunnysideup-sswebpack-engine-only) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)