visto9259 / php-webpack-plugin

A Webpack plugin for PHP

PHP Webpack Plugin

This module will work only with Webpack 4 and above.

This Webpack plugin will create a PHP file in your output.path directory containing an associative arrays of entry points and their corresponding chunk groups.

The resulting file can be used by your PHP application to determine which files should be included when rendering your frontend of your website.

The resulting PHP file will have the following format:

<?php
return [
    'entry1' => [
        'chunk1.js' => '{publicPath}/asset1.js',
        'chunk2.js => '{publicPath}/asset2.js',
        // ... more chunks for 'entry1'
    ],
    'entry2' => [
        'chunk1.js' => '{publicPath}/asset1.js',
        'chunk2.js => '{publicPath}/asset2.js',
        // ... more chunks for entry2
    ]
];

In a ZendFramework or Laminas MVC application, this file can be used to load the scripts associated with a given rendered page by associating templates or matched routes to a given entry point.

(An example application will come later)

Companion Zend and Laminas framework modules are in the works to automate the rendering of script tags using the output of this plugin.

Install

Using NPM

$ npm install @visto9259/php-webpack-plugin

Using Yarn

$ yarn add @visto9259/php-webpack-plugin

Usage

// in your webpack config file

const PhpWebpackPlugin = require('php-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new PhpWebpackPlugin(options)
    ]
}

Available Options

filename (default: "scriptlists.php")

The filename that will contain the associative array. The file will be created in the directory set by output.path and will be appended with .php if no extension is set.

entryPoint (default: null)

The name of the entry point in the webpack configuration for which to create a script. If not set, then all the entry points are processed.

For example, considering the following webpack config:

const PhpWebpackPlugin = require('php-webpack-plugin');

module.exports = {
    entry: {
        main: 'index.js',
        print: 'print.js,
    },
    plugins: [
        new PhpWebpackPlugin({
        }),
        new PhpWebpackPlugin({
            entryPoint: 'print'
            filename: 'print'
        }),
    ]
} 

then 2 PHP files will be created:

scriptlist.php from the first instance of the plugin:

<?php
return [
    'main' => [
        'index.js' => '{publicPath}/index.js',
        'chunk2.js => '{publicPath}/chunk2.js',
        // ... more chunks
    ],
    'print' => [
        'print.js' => '{publicPath}/index.js'
        'chunk2.js => '{publicPath}/chunk2.js',
        // ... more chunks
    ]
];

print.php from the second instance of the plugin:

<?php
return [
    'print' => [
        'print.js' => '{publicPath}/index.js'
        'chunk2.js => '{publicPath}/chunk2.js',
        // ... more chunks
    ]
];

Future versions

I want this plugin to evolve. Ideas for future versions:

• Add templating capability for more control on the content of the output file
• Add hooks to extend processing using other plugins

Issues

This is a new package. Probably not free of bugs. Please raise issues and questions in the issues section.

php-webpack-plugin's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

npm

package.json

• lodash ^4.17.15
• webpack ^5.0.0 || ^4.0.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Error when building with Webpack v5

Hi!

I'm using Webpack v5 in my project. While installing this library, encountered some errors:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.64.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.42.1" from @visto9259/[email protected]
npm ERR! node_modules/@visto9259/php-webpack-plugin
npm ERR!   dev @visto9259/php-webpack-plugin@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/myuser/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/myuser/.npm/_logs/2022-01-16T12_59_09_182Z-debug.log

(The name of my package is replaced with "mypackage", the name of my user is replaced with "myuser")

I'm guessing this problem comes from the fact that this plugin should be used with Webpack v4.

After installing the library with --legacy-peer-deps flag and continuing with installation instructions, this is what I met after invoking a build process:

[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Object
    at new NodeError (node:internal/errors:371:5)
    at validateString (node:internal/validators:120:11)
    at Object.join (node:path:1172:7)
    at /var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/@visto9259/php-webpack-plugin/index.js:32:38
    at Array.forEach (<anonymous>)
    at /var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/@visto9259/php-webpack-plugin/index.js:31:24
    at Array.forEach (<anonymous>)
    at genPHPOutputAssocArray (/var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/@visto9259/php-webpack-plugin/index.js:27:25)
    at /var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/@visto9259/php-webpack-plugin/index.js:74:28
    at Hook.eval [as callAsync] (eval at create (/var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1) {
  code: 'ERR_INVALID_ARG_TYPE'
}

I just wanted to try out this library, but since it doesn't work, I guess I will search for alternatives. Would be nice if the compatibility with Webpack v5 would be fixed, if this project is maintained.