Download the PHP package pieceofcake2/webpack-encore without Composer

CakePHP 2.x Webpack Encore Plugin

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 <link>, <script>, or <img> tags.

Installation

0. Install plugin:

1. Build your Encore assets (e.g., with Symfony Encore or webpack). From your project root, run:

   This should generate:

   • webroot/build/entrypoints.json
   • webroot/build/manifest.json
   • The webroot/build/ directory containing compiled .js, .css, and image files.

2. Copy EncoreHelper.php into your CakePHP app under:

3. Load the helper in your controller (e.g., AppController):

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

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:

Replace the paths accordingly if they differ.

Helper Methods

1. asset($assetPath)

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).

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

Renders an <img> tag for a given image asset by resolving through manifest.json.

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

Renders one or more <link> 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().

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

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

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

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

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

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

Example Layout Integration

In app/View/Layouts/default.ctp:

• <head>: entryLinkTags('app') outputs <link> tags for all CSS associated with the app entry.
• <body>: entryScriptTags('app') outputs <script> tags for all JS associated with the app entry.
• The image() method resolves and renders an <img> tag for an image asset.

Notes

• Always rebuild your assets (run npm run encore dev or npm run encore production) after changing frontend code to update entrypoints.json and manifest.json.
• This helper expects the paths in both JSON files to start with /build/.... If you use a different directory, adjust the JSON outputs or change Configure::write('Encore.entrypointsPath', ...) and Configure::write('Encore.manifestPath', ...) accordingly.
• The helper loads and caches both JSON files once in its constructor for performance. Subsequent calls will not re-read the files.

License

This plugin is released under the MIT License. You are free to adapt and redistribute it in compliance with the license.