https://github.com/sunnysideup/silverstripe-sswebpack_engine_only

Engine only for Silverstripe Webpack
https://github.com/sunnysideup/silverstripe-sswebpack_engine_only

Last synced: about 2 months ago
JSON representation

Engine only for Silverstripe Webpack

• Host: GitHub
• URL: https://github.com/sunnysideup/silverstripe-sswebpack_engine_only
• Owner: sunnysideup
• License: other
• Created: 2017-08-28T06:02:48.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-10-11T09:14:50.000Z (3 months ago)
• Last Synced: 2024-10-26T03:08:19.040Z (2 months ago)
• Language: Shell
• Size: 4.59 MB
• Stars: 3
• Watchers: 5
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Base SilverStripe theme with a webpack build system

This webpack install allows you to compile any project / vendor/package.

It uses [symphony encore](https://www.npmjs.com/package/@symfony/webpack-encore) to make it fly!

## Installation

 - Install this to your themes folder as `sswebpack_engine_only` (composer should do this automatically)

 - Make sure you are on the latest version of node and npm (you could use nvm for this). 

 - run `npm install` in the root folder of module.

 - 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 files you need to create.

 - Expose the dist folder in the public resources folder, using composer, as per usual.

 - Browse to the root folder of this module and use the following commands:

# Usage

```

npm run MY_COMMAND --theme_dir=themes/mytheme`

```

OR

```

npm run MY_COMMAND --theme_dir=vendor/myvendor/mypackage/client`

```

Where MY_COMMAND can be

 - `dev` (debug),

 - `watch` (develop), or

 - `build` (prepare for production).

# Good to know

### required structure

 - Your theme name can be anything.  We use `mytheme` as an example name.  You can also use this webpack on vendor packages.

 - the `main.js` and `style.scss` show you to include JS and CSS from other parts.

 - Add a `themes/mytheme/dist` folder for the final output.

 - Add a `themes/mytheme/my_node_modules/` to include other modules (using a package.json file inside that folder).

   You can also include node modules in `mytheme/src` by adding a `package.json` file, i.e.

   running `npm init -y && npm install` in the `mytheme/src` folder.

### jQuery

- jQuery has been aliased so that you can use jQuery anywhere without importing it.

- jQuery can also be added to the global namespace: `window.jQuery = jquery` (untested).

### Editor File

- There is an option to also include an editor file so that you can add it to your TinyMCE HTML Editor.

  Run the watch / build command you will see the configurations available.

### including the build files:

Here is how to include the files efficiently:

1. add `sunnysideup/webpack_requirements_backend:dev-master` using composer

2. check out its documentation on how to add the required files.