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.

Installs: 2 603

Dependents: 18

Suggesters: 1

Security: 0

Stars: 3

Watchers: 5

Forks: 1

Open Issues: 1

Language:Shell

Type:silverstripe-theme

14.4.1 2024-10-11 09:14 UTC

README

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

It uses symphony 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 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.