Download the PHP package grandfelix/cakephp-webpack without Composer
On this page you can find all versions of the php package grandfelix/cakephp-webpack. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download grandfelix/cakephp-webpack
More information about grandfelix/cakephp-webpack
Files in grandfelix/cakephp-webpack
Informations about the package cakephp-webpack
Webpack plugin for CakePHP
Collect all .js, .scss (you can configure extensions) files and collect them in json file. Webpack consumes json from this file and compile it, minifiy it....
Requirements
- PHP >= 7.4
- CakePHP >= 4.0
- Webpack >= 4.0 (you can use older webpack, but you must configure (webpack.config.js) it on your own).
Installation
You can install this plugin into your CakePHP application using composer.
The recommended way to install composer packages is:
Load plugin
Add next line to Application.php
Install webpack config files
To install webpack go to app root folder and run next command:
yarn
npm
Install webpack globally! yarn global add webpack-cli
or npm -g install webpack-cli
Usage
In each of your plugin conf folder (where you want to use it) create webpack.config.php with next config:
You can add as many entry points as you want.
Run next shell command:
This command will create webpack.config.json in app root dir so webpack caa use it!
In root of app run next command for development build
--watch option is optional
Production build
In your view files use HtmlHelper to include generated files as you need
Clean source map files
In production builds we clean up *.map files. You can disable this behavior with Webpack.clean_before_build => false
config option in your App config (we don't recommend it!).
Config
``
You can override those config options in your main App config.
Alias key
Alias key at compile time
Is used to name file for compilation. In this ^^ example webpack will for js resource create concatenated file in main app webroot, like: APP/webroot/js/plugin-name-js.js and for styles will create APP/webroot/css/plugin-name-styles.scss
Alias key for importing/requiring files
Alias key can also be used for importing/requring files. Alias for importing is like pluginNameAliasKey so you can use in js like
instead of using full paths which is painful. Paths are relative to aliasPath from resource config.