grandfelix/cakephp-webpack

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...., _(*1)

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., _(*2)

The recommended way to install composer packages is:, _(*3)

composer require grandfelix/cakephp-webpack

Load plugin, _(*4)

Add next line to Application.php, _(*5)

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

Install webpack config files, _(*6)

./bin/cake webpack install

To install webpack go to app root folder and run next command:, _(*7)

yarn, _(*8)

yarn

npm, _(*9)

npm install

Install webpack globally! yarn global add webpack-cli or npm -g install webpack-cli, _(*10)

Usage

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

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., _(*12)

Run next shell command:, _(*13)

./bin/cake webpack reload

This command will create webpack.config.json in app root dir so webpack caa use it!, _(*14)

In root of app run next command for development build, _(*15)

--watch option is optional, _(*16)

./bin/cake webpack build --watch

Production build, _(*17)

./bin/cake webpack build --production

In your view files use HtmlHelper to include generated files as you need, _(*18)

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!)., _(*19)

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., _(*20)

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, _(*21)

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, _(*22)

import something from 'pluginNameAliasKey/path_to/some_file'

instead of using full paths which is painful. Paths are relative to aliasPath from resource config., _(*23)