README

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

安装

使用 Composer 安装最新版本的包

$ composer require malyusha/laravel-webpack-assets

接下来，您需要将服务提供者添加到您的 config/app.php 文件中的 providers 部分

• \Malyusha\WebpackAssets\WebpackAssetsServiceProvider::class

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

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

配置

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

$ php artisan vendor:publish

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

• file - 相对于 public 目录的 manifest.json 文件的路径；

使用

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

• webpack_script($script) - 将生成 <script src="path_to_script_from_manifest_file"></script>；
• webpack_style($style) - 与 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
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

在 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') !!}

// Will output
<style>...content of main.css file...</style>