PHPackages                             pieceofcake2/webpack-encore - 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. pieceofcake2/webpack-encore

ActiveCakephp-plugin

pieceofcake2/webpack-encore
===========================

v1.0.0(7mo ago)0288MITPHPPHP ^8.0

Since Oct 5Pushed 7mo agoCompare

[ Source](https://github.com/pieceofcake2/webpack-encore)[ Packagist](https://packagist.org/packages/pieceofcake2/webpack-encore)[ RSS](/packages/pieceofcake2-webpack-encore/feed)WikiDiscussions 1.x Synced 1mo ago

READMEChangelogDependencies (7)Versions (2)Used By (0)

CakePHP 2.x Webpack Encore Plugin
=================================

[](#cakephp-2x-webpack-encore-plugin)

[![GitHub License](https://camo.githubusercontent.com/b30e05e483d194db5a4969081837865dffeed637965fb25942c4515866e42789/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f70696563656f6663616b65322f7765627061636b2d656e636f72653f6c6162656c3d4c6963656e7365)](LICENSE)[![Packagist Version](https://camo.githubusercontent.com/98aa48ec5b11025f512f4dcfa6f83be755d808adb68b466c05373efc9ffbafe0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f70696563656f6663616b65322f7765627061636b2d656e636f72653f6c6162656c3d5061636b6167697374)](https://packagist.org/packages/pieceofcake2/webpack-encore)[![PHP](https://camo.githubusercontent.com/a9dd2a7ec8643de37021423dc9e9c1d44b38c05051009e5da76030a3bbadaa5c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f70696563656f6663616b65322f7765627061636b2d656e636f72652f7068703f6c6f676f3d706870266c6f676f436f6c6f723d253233464646464646266c6162656c3d504850266c6162656c436f6c6f723d25323337373742423426636f6c6f723d253233464646464646)](https://camo.githubusercontent.com/a9dd2a7ec8643de37021423dc9e9c1d44b38c05051009e5da76030a3bbadaa5c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f70696563656f6663616b65322f7765627061636b2d656e636f72652f7068703f6c6f676f3d706870266c6f676f436f6c6f723d253233464646464646266c6162656c3d504850266c6162656c436f6c6f723d25323337373742423426636f6c6f723d253233464646464646)[![CakePHP](https://camo.githubusercontent.com/ef069dfeafc3dabcbcec84a4a3ffa3988b2b5ec4701a817064d44bd44b365c4a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f70696563656f6663616b65322f7765627061636b2d656e636f72652f70696563656f6663616b65322f63616b657068703f6c6f676f3d63616b65706870266c6f676f436f6c6f723d253233464646464646266c6162656c3d43616b65504850266c6162656c436f6c6f723d25323344333343343326636f6c6f723d253233464646464646)](https://camo.githubusercontent.com/ef069dfeafc3dabcbcec84a4a3ffa3988b2b5ec4701a817064d44bd44b365c4a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f70696563656f6663616b65322f7765627061636b2d656e636f72652f70696563656f6663616b65322f63616b657068703f6c6f676f3d63616b65706870266c6f676f436f6c6f723d253233464646464646266c6162656c3d43616b65504850266c6162656c436f6c6f723d25323344333343343326636f6c6f723d253233464646464646)[![Tests](https://camo.githubusercontent.com/321f7e3d6a2c40bece745ba2a7f818b3f2a4ce11f9fa966ffde771a21fc34094/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f70696563656f6663616b65322f7765627061636b2d656e636f72652f74657374732e796d6c3f6c6162656c3d5465737473)](https://github.com/pieceofcake2/webpack-encore/actions/workflows/tests.yml)[![Codecov](https://camo.githubusercontent.com/308693ea9824839d3d8b7db21cc1ca47a16f9877ae156f8fac8cd7b86e942735/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f67682f70696563656f6663616b65322f7765627061636b2d656e636f72653f6c6162656c3d436f766572616765)](https://codecov.io/gh/pieceofcake2/webpack-encore)

This helper allows you to integrate Symfony Webpack Encore–built assets (CSS, JS, images) into a CakePHP 2 application. It reads `entrypoints.json` and `manifest.json` to resolve fingerprinted asset filenames and output proper ``, ``, or `` tags.

Installation
------------

[](#installation)

1. **Install plugin**:

    ```
    composer require pieceofcake2/webpack-encore
    ```
2. **Build your Encore assets** (e.g., with Symfony Encore or webpack). From your project root, run:

    ```
    npm install
    npm run encore dev
    ```

    This should generate:

    - `webroot/build/entrypoints.json`
    - `webroot/build/manifest.json`
    - The `webroot/build/` directory containing compiled `.js`, `.css`, and image files.
3. **Copy `EncoreHelper.php` into your CakePHP app** under:

    ```
    app/View/Helper/EncoreHelper.php

    ```
4. **Load the helper in your controller** (e.g., `AppController`):

    ```
    // app/Controller/AppController.php
    App::uses('Controller', 'Controller');

    class AppController extends Controller {
        public $helpers = ['Html', 'WebpackEncore.Encore'];
    }
    ```

    Now you can use `$this->Encore` in your views.

---

Configuration (Configure)
-------------------------

[](#configuration-configure)

By default, the helper expects:

- `entrypoints.json` at `webroot/build/entrypoints.json`
- `manifest.json` at `webroot/build/manifest.json`

If you store these files in different locations, add the following to `app/Config/bootstrap.php`:

```
// app/Config/bootstrap.php

// Full filesystem path to entrypoints.json
Configure::write('WebpackEncore.entrypointsPath', WWW_ROOT . 'build/entrypoints.json');
// Full filesystem path to manifest.json
Configure::write('WebpackEncore.manifestPath',    WWW_ROOT . 'build/manifest.json');
```

Replace the paths accordingly if they differ.

---

Helper Methods
--------------

[](#helper-methods)

### 1. `asset($assetPath)`

[](#1-assetassetpath)

Resolves a single logical asset path (as a key in `manifest.json`) to the final fingerprinted URL. Returns a web-accessible path (including leading slash).

```
// Given manifest.json contains:
// {
//   "build/images/logo.png": "/build/images/logo.3eed42.png"
// }

echo $this->Encore->asset('build/images/logo.png');
// Outputs: /build/images/logo.3eed42.png
```

### 2. `image($assetPath, array $htmlAttributes = [])`

[](#2-imageassetpath-array-htmlattributes--)

Renders an `` tag for a given image asset by resolving through `manifest.json`.

```
// Outputs:
echo $this->Encore->image('build/images/cake_logo.png', ['alt' => 'CakePHP']);
```

### 3. `css($assetPaths, array $options = [])`

[](#3-cssassetpaths-array-options--)

Renders one or more `` tags for CSS assets. The first argument can be a string or an array of strings. Each path is resolved via `manifest.json`, then passed to `HtmlHelper::css()`.

```
// Single CSS file
echo $this->Encore->css('build/app.css', ['inline' => false]);

// Multiple CSS files
echo $this->Encore->css([
    'build/vendors.3d4e5f.css',
    'build/app.abc123.css'
], ['inline' => false]);
```

### 4. `script($assetPaths, array $options = [])`

[](#4-scriptassetpaths-array-options--)

Renders one or more `` tags for JavaScript assets. Accepts a string or an array of strings. Each is resolved via `manifest.json`, then passed to `HtmlHelper::script()`.

```
// Single JS file
echo $this->Encore->script('build/app.js', ['block' => true]);

// Multiple JS files
echo $this->Encore->script([
    'build/runtime.0a1b2c.js',
    'build/vendors.3d4e5f.js',
    'build/app.123abc.js'
], ['block' => true]);
```

### 5. `entryLinkTags($entryName, array $options = [])`

[](#5-entrylinktagsentryname-array-options--)

Reads `entrypoints.json` and renders `` tags for all CSS files associated with the given entry (e.g., `app`, `dashboard`).

```
// entrypoints.json example:
// {
//   "entrypoints": {
//     "app": {
//       "css": ["/build/vendors.3d4e5f.css","/build/app.abc123.css"],
//       "js": ["/build/runtime.0a1b2c.js","/build/vendors.3d4e5f.js","/build/app.123abc.js"]
//     }
//   }
// }

echo $this->Encore->entryLinkTags('app', ['inline' => false]);
// Outputs two  tags for the app entry's CSS files
```

### 6. `entryScriptTags($entryName, array $options = [])`

[](#6-entryscripttagsentryname-array-options--)

Reads `entrypoints.json` and renders `` tags for all JS files associated with the given entry.

```
echo $this->Encore->entryScriptTags('app', ['block' => true]);
// Outputs three  tags for the app entry's JS files
```

Example Layout Integration
--------------------------

[](#example-layout-integration)

In `app/View/Layouts/default.ctp`:

```
DOCTYPE html>