README

安装

使用

运行

文档

安装

composer require goldenplanetdk/symfony-webpack

添加到 AppKernel

new GoldenPlanet\WebpackBundle\GoldenPlanetWebpackBundle(),

生成 webpack.symfony.config.js 并安装依赖

app/console webpack:setup

使用

Twig 函数和标签

您可以选择 webpack_asset 函数和 webpack 标签之间的一个

webpack_asset 函数

webpack_asset(resource, type = null)

type 是 js 或 css，留空以猜测类型。对于 css，此函数如果提供的入口点没有提取任何 CSS，则可能返回 null。如果您确定将会有一些 CSS，则可以忽略此选项。否则，您可以使用 webpack 标签，因为它会为您处理（在这种情况下会完全省略 <link/> 标签）。

webpack 标签

{% webpack [js|css] [named] [group=...] resource [resource, ...] %}
    Content that will be repeated for each compiled resource.
    {{ asset_url }} - inside this block this variable holds generated URL for current resource
{% end_webpack %}

与 webpack_asset 函数类似，提供 js、css 或留空以猜测类型。

在公共块部分查看使用示例。

请注意，您必须在标签和函数中提供硬编码的资产路径。这是为了在编译时找到所有可用的资产。

脚本和样式表

在 twig 模板中的单个入口点（.js、.ts、.coffee 等）

<link rel="stylesheet" href="{{ webpack_asset('@acmeHello/script.js', 'css') }}">
<script defer src="{{ webpack_asset('@acmeHello/script.js') }}"></script>

注意：这里 @acmeHello 等于 @AcmeHelloBundle/Resources/assets

多个入口点

{% webpack js
    '@acmeHello/main.js'
    '@acmeHello/another-entry-point.js'
%}
    <script defer src="{{ asset_url }}"><script>
{% end_webpack %}

{% webpack css
    '@acmeHello/main.js'
    '@acmeHello/another-entry-point.js'
%}
    <link rel="stylesheet" href="{{ asset_url }}"><script>
{% end_webpack %}

为了避免在 DOM 中出现具有空 href 的 link 元素，当脚本可能不会生成样式表时，在插入 link 元素之前测试 webpack_asset 返回的值

{% set cssUrl = webpack_asset('@acmeHello/script.js', 'css') %}
{% if cssUrl %}
    <link rel="stylesheet" href="{{ cssUrl }}">
{% endif %}

公共块

此包支持单个和多个 公共块，但您必须明确配置此选项。

在您的 webpack.config.js

config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
        name: 'commons'
    })
);

在您的基本模板中

{% webpack named css 'commons' %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
{% end_webpack %}
{# ... #}
{% webpack named js 'commons' %}
    <script src="{{ asset_url }}"></script>
{% end_webpack %}

您也可以使用 webpack_named_asset twig 函数而不是 webpack 标签。

命名公共块

在 webpack 配置中，允许将常用库（共享依赖）放入单独的文件中，同时在使用 require 时仍引用相同的单例库。例如，要将 jquery 和 lodash 放入单独的文件（公共块）中，请将以下内容添加到您的 webpack.symfony.config.js

module.exports = function makeWebpackConfig(symfonyOptions) {

	config.entry = symfonyOptions.entry;
	config.entry['jquery-and-lodash'] = ['jquery', 'lodash'];
	
	// ...
		
	config.plugins.push(
		new webpack.optimize.CommonsChunkPlugin({
			names: [
				'jquery-and-lodash', // match entry point name(s)
			],
		}),		
	)
}

然后添加将加载公共库的脚本，在依赖它的任何其他脚本之前。使用 webpack_named_asset 函数注入实际的编译资产路径

<script defer src="{{ webpack_named_asset('jquery-and-lodash') }}"><script>

公共块可以包含其他类型的资产

<link rel="stylesheet" href="{{ webpack_named_asset('shared', 'css') }}">

在生产模式下，上述内容的渲染输出将类似于

<script src="/compiled/jquery-and-lodash.64ff80bf.c95f999344d5b2777843.js"></script>
<link rel="stylesheet" href="/compiled/shared.0a8efeb2b0832928e773.css">

Webpack 也可以配置为自动确定多个入口点中常用的库。计划支持这些功能。

其他资源类型

您可以通过 webpack_asset 函数将任何类型的资源传递给 webpack（用于单个入口点）

<img src="{{ webpack_asset('@AcmeHelloBundle/Resources/public/images/background.jpg') }}">

或通过 webpack 标签（用于多个入口点）

<ul class="nav nav-pills social-icons">
	{% webpack
		'@AcmeHelloBundle/Resources/public/images/facebook.jpg'
		'@AcmeHelloBundle/Resources/public/images/twitter.jpg'
		'@AcmeHelloBundle/Resources/public/images/youtube.jpg'
	%}
		<li>
			<img src="{{ asset_url }}">
		</li>
	{% end_webpack %}
</ul>

在脚本和样式表中要求

在 script.js 内部

import URI from 'urijs';
import {Person} from './models/person';

require('./other-script.ts');

在 stylesheet.css、less、sass 或 stylus 内部

body {
    background: url('~@AcmeBundle/Resources/images/bg.jpg');
}

编译

使用 Symfony app/console 运行 webpack 命令

为开发环境编译

app/console webpack:compile

监视更改并编译

app/console webpack:watch

监视更改，编译并自动重新加载浏览器标签页

app/console webpack:dev-server

在生产环境中将编译作为部署的一部分

app/console webpack:compile --env=prod

文档

完整的文档可在以下链接找到：此存储库的维基页面