Laravel Webpack Assets

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 to public 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 as webpack_script but for style;
• webpack($chunkName = null) - will return instance of Asset 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>