README

Laravel Webpack Assets

一个允许您从由 Webpack Manifest Plugin 生成的 json 文件中包含资源的包

安装

使用 Composer 安装最新版本的包

$ composer require malyusha/laravel-webpack-assets

如果您使用的 Laravel 版本小于 5.5，您需要将服务提供者添加到您的 config/app.php 文件中的 providers 部分

• \Malyusha\WebpackAssets\WebpackAssetsServiceProvider::class

您可以在 facades 部分添加 WebpackAssets 门面

• 'WebpackAssets' => \Malyusha\WebpackAssets\Facade::class

配置

要更改包配置，您需要发布配置文件

$ php artisan vendor:publish --tag=config

这将发布 assets_manifest.php 文件到您的 config 目录。配置文件有几个选项

• file - 相对于 disk 路径的 manifest.json 文件路径。参见 disk 选项；
• fail_on_load - 是否在加载资源文件时失败。如果为真，则抛出异常；
• disk - manifest.json 和所有资源文件所在的路径。参见 laravel 的 config/filesystems.php -> disks。

用法

该包提供了辅助函数，用于在 blade 模板中包含脚本和样式 HTML 元素

• webpack_script($script) - 将生成 <script src="path_to_script_from_manifest_file"></script>；
• webpack_style($script- 与 webpack_script 类似，但用于样式；
• webpack($chunkName = null) - 如果没有提供参数，将返回 Asset 类的实例，否则返回带有主机名的资源 URL。

示例

让我们假设，您已经生成了一个包含如下内容的 manifest.json 文件

{
  "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"
}

检索路径

$webpackAssets = webpack();
// Full urls with hostname of filesystem. E.g. if disk driver is set to `public`, and `url` option
// is env('APP_URL').'/storage'
echo $webpackAssets->url('app.js'); // Output - http://host.dev/storage/assets/1b53147322421b069bf1.js
echo $webpackAssets->url('app.css'); // Output - http://host.dev/storage/assets/css/20a7e7e51e1f142b2b1f.css

// Absolute path for given filesystem. E.g. if disk driver is set to `public` and `root` parameter set to
// storage_path('app/public')
echo $webpackAssets->path('app.js'); // Output - /{project_dir}/storage/app/public/assets/1b53147322421b069bf1.js

// Relative paths, as they're presented inside json file
echo $webpackAssets->chunkPath('app.js'); // Output - /assets/1b53147322421b069bf1.js

在 blade 模板中使用

每次您想输出资源时，只需简单写入

{!! webpack_script('app.js') !!}

// or

{!! webpack()->image('background.png', 'Background') !!} 
// Output: <img alt="Background" src="http://host.dev/assets/e60cc0de08eee2256222218425eaa943.png">

原始文件内容

当您需要添加内联文件内容，如用 style 或 script 标签包裹的 css 或 js 时，您现在可以使用辅助函数来完成此操作：webpack_raw_style 和 webpack_raw_script，或者如果它是对象，则使用 webpack()->rawStyle() 和 webpack()->rawScript()。

{!! webpack_raw_style('css/main.css') !!}

{{-- Or --}}

{!! webpack()->rawStyle('css/main.css') !!}

{{--Output--}}
<style>...content of main.css file...</style>