PHPackages                             grandfelix/cakephp-webpack - 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. grandfelix/cakephp-webpack

ActiveCakephp-plugin[Utility & Helpers](/categories/utility)

grandfelix/cakephp-webpack
==========================

Webpack plugin for CakePHP

1.0.0(3y ago)112763PHPPHP >=7.4.0

Since Feb 23Pushed 2y ago2 watchersCompare

[ Source](https://github.com/GrandFelix/cakephp-webpack)[ Packagist](https://packagist.org/packages/grandfelix/cakephp-webpack)[ RSS](/packages/grandfelix-cakephp-webpack/feed)WikiDiscussions master Synced yesterday

READMEChangelog (2)Dependencies (2)Versions (4)Used By (0)

Webpack plugin for CakePHP
==========================

[](#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
------------

[](#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
------------

[](#installation)

You can install this plugin into your CakePHP application using [composer](http://getcomposer.org).

The recommended way to install composer packages is:

```
composer require grandfelix/cakephp-webpack

```

**Load plugin**

Add next line to Application.php

```
$this->addPlugin('GrandFelix/Webpack', ['bootstrap' => true, 'routes' => false]);

```

**Install webpack config files**

```
./bin/cake webpack install

```

To install webpack go to app root folder and run next command:

**yarn**

```
yarn

```

**npm**

```
npm install

```

**Install webpack globally!** `yarn global add webpack-cli` or `npm -g install webpack-cli`

Usage
-----

[](#usage)

In each of your plugin conf folder (where you want to use it) create webpack.config.php with next config:

```
return [
  'js' => [ // this is alias key!
    'aliasPath' => 'webroot/js', // relative to plugin or main app path
    'resources' => [ // all paths here are relative to aliasPath
      'path/to/somefile.js',
      '/', // this will take all files from aliasPath
    ]
  ],
  'styles' => [ // alias key
    'aliasPath' => 'webroot/styles', // relative to plugin or main app path
    'resources' => [ // all paths here are relative to aliasPath
      'path/to/somefile.scss', // you can also use js... webpack will compile js files and scss files and move them where they should be after compilation
      '/', // this will take all files from aliasPath
    ]
  ]
];
```

You can add as many entry points as you want.

Run next shell command:

```
./bin/cake webpack reload

```

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

```
./bin/cake webpack build --watch

```

**Production build**

```
./bin/cake webpack build --production

```

In your view files use HtmlHelper to include generated files as you need

### Clean source map files

[](#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
------

[](#config)

```
return [
    'Webpack' => [
        'resources' => [
            'fileExtensionsToSearch' => ['js', 'scss'] // search for file extensions
        ],
        'clean_before_build' => true, // clean *.map files in production build
        'clean_dirs' => [ // folders to clean up in production build
            WWW_ROOT . 'js/*.map',
            WWW_ROOT . 'css/*.map',
        ]
    ]
];
```

You can override those config options in your main App config.

### Alias key

[](#alias-key)

#### Alias key at compile time

[](#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-for-importingrequiring-files)

Alias key can also be used for importing/requring files. Alias for importing is like pluginNameAliasKey so you can use in js like

```
import something from 'pluginNameAliasKey/path_to/some_file'
```

instead of using full paths which is painful. Paths are relative to aliasPath from resource config.

###  Health Score

32

—

LowBetter than 69% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~2068 days

Total

2

Last Release

1347d ago

Major Versions

0.1 → 1.0.02022-10-23

PHP version history (2 changes)0.1PHP >=5.6

1.0.0PHP >=7.4.0

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5418644?v=4)[Blaz Smolnikar](/maintainers/GrandFelix)[@GrandFelix](https://github.com/GrandFelix)

---

Top Contributors

[![GrandFelix](https://avatars.githubusercontent.com/u/5418644?v=4)](https://github.com/GrandFelix "GrandFelix (31 commits)")

---

Tags

buildcakephpcakephp-webpackjavascriptphpscsswebpackcakephpwebpack

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/grandfelix-cakephp-webpack/health.svg)

```
[![Health](https://phpackages.com/badges/grandfelix-cakephp-webpack/health.svg)](https://phpackages.com/packages/grandfelix-cakephp-webpack)
```

###  Alternatives

[dereuromark/cakephp-tools

A CakePHP plugin containing lots of useful and reusable tools

3361.0M49](/packages/dereuromark-cakephp-tools)[cakephp/debug_kit

CakePHP Debug Kit

86314.7M162](/packages/cakephp-debug-kit)[cakephp/bake

Bake plugin for CakePHP

11212.0M192](/packages/cakephp-bake)[dereuromark/cakephp-ide-helper

CakePHP IdeHelper Plugin to improve auto-completion

1902.3M40](/packages/dereuromark-cakephp-ide-helper)[markstory/asset_compress

An asset compression plugin for CakePHP. Provides file concatenation and a flexible filter system for preprocessing and minification.

3761.1M15](/packages/markstory-asset-compress)[dereuromark/cakephp-queue

The Queue plugin for CakePHP provides deferred task execution.

308914.0k25](/packages/dereuromark-cakephp-queue)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)