slouma2000 / laravel-webpack-manifest
Package to use WebpackManifestPlugin in laravel
Installs: 2
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Type:package
Requires
- php: >=7.1
- illuminate/routing: ^6.0
- illuminate/support: ^6.0
Requires (Dev)
- mockery/mockery: ^0.9.9
- phpunit/phpunit: ^6.1
This package is auto-updated.
Last update: 2024-04-19 16:57:32 UTC
README
Package that allows you to include assets from json file, generated by Webpack Manifest Plugin
Installation
Require the latest version of package using Composer
$ composer require malyusha/laravel-webpack-assets
Next, you need to add service provider into your config/app.php
file in providers
section:
\Malyusha\WebpackAssets\WebpackAssetsServiceProvider::class
You can add the WebpackAssets facade in facades
section:
'WebpackAssets' => \Malyusha\WebpackAssets\Facade::class
Configuration
To change package configuration you need to publish configuration files:
$ php artisan vendor:publish
This will publish assets.php
file inside your config
directory.
Configuration file has a few options:
file
- path to manifest.json file, relative topublic
directory;
Usage
Package provides helper functions to include script and style HTML elements inside blade templates:
webpack_script($script)
- will generate<script src="path_to_script_from_manifest_file"></script>
;webpack_style($script
- will do the same aswebpack_script
but for style;webpack($chunkName = null)
- will return instance ofAsset
class if no arguments provided, otherwise returns asset url with host.
Examples
Let's imagine, that you have generated manifest.json
file with such content:
{ "app.js": "/assets/1b53147322421b069bf1.js", "auth.background.png": "/assets/e60cc0de08eee2256222218425eaa943.png", "auth.login.css": "/assets/css/20a7e7e51e1f142b2b1f.css", "auth.login.js": "/assets/20a7e7e51e1f142b2b1f.js", "auth.password.forgot.css": "/assets/css/280c079c4407fbd0fdca.css", "auth.password.forgot.js": "/assets/280c079c4407fbd0fdca.js" }
Retrieving paths
$webpackAssets = webpack(); // Full urls with hostname echo $webpackAssets->url('app.js'); // http://host.dev/assets/1b53147322421b069bf1.js echo $webpackAssets->url('app.css'); // http://host.dev/assets/css/20a7e7e51e1f142b2b1f.css // Relative paths echo $webpackAssets->path('app.js'); // /assets/1b53147322421b069bf1.js
Using in blade templates
Whenever you want to output your asset simply write:
{!! webpack_script('app.js') !!} // or {!! webpack()->image('background.png', 'Background') !!} // Output: <img alt="Background" src="http://host.dev/assets/e60cc0de08eee2256222218425eaa943.png">
Raw file contents
When you need to add inline file content, such as css or js wrapped with style
or script
tags
you can now use helper functions for that: webpack_raw_style
and webpack_raw_script
, or if
in object - webpack()->rawStyle()
and webpack()->rawScript()
.
{!! webpack_raw_style('css/main.css') !!} // or {!! webpack()->rawStyle('css/main.css') !!} // Will output <style>...content of main.css file...</style>