This package is deprecated and no longer maintained. Use the Node webpack package as a replacement.
Webpack
To make coding easier and to use various NPM packages, the Webpack capability has been implemented in the framework. You can write the theme's CSS using Less and the JavaScript files as jQuery or even TypeScript. The framework automatically downloads the required packages and, after compilation, loads the registered files as a single file on the page.
To use this capability, you need to use the Webpack package alongside the main package in order to compile the files.
For more information about NPM packages, refer to the NPM page.
Installation
You can always download the latest version from the repository's main branch: Download ZIP
Or clone the entire repository alongside the main package:
git clone https://github.com/yeganemehr/webpack.git
Setup
After this, you can navigate to the project's root directory and invoke this package's process via the command line. Using NPM, this process downloads all the packages registered in the themes' definition file and compiles them together with the CSS and JavaScript you have written in each theme.
php index.php --process=packages/webpack/processes/webpack@run
For more information, refer to the Process page.
After running the command above, you will see many logs; you must wait for the process to finish.
Once it is done, a directory named node_modules is created in each theme's directory. You do not need to modify the files in this directory, nor do you need to move it when relocating the site's package.
After changing any of the npm packages or modifying the CSS and JavaScript code, this process must be run again.
Each time this process runs, any npm package that has already been downloaded is not downloaded again.
The output is just two files, one for CSS and the other for JavaScript, which greatly helps the site's loading speed.
To load the CSS files, you only need to call the loadCSS method in the HTML page. This method is defined in the packages/base/view class, and the views inherit from it based on the parent-child relationship.
Example of loading the CSS files:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>My First Site</title>
<?php $this->loadCSS(); ?>
</head>
To load the JavaScript files, you only need to call the loadJS method in the HTML page. This method is also defined in the packages/base/view class, and the views inherit from it based on the parent-child relationship.
Example of loading the JavaScript files:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<?php $this->loadJS(); ?>
</body>
</html>
Cleaning Up NPM Packages
The clean method of this process removes all downloaded npm packages in each theme.
php index.php --process=packages/webpack/processes/webpack@clean