README

此组件允许您通过读取 entrypoints.json 文件并帮助您渲染所需的全部动态 script 和 link 标签来使用来自 Webpack Encore 的 splitEntryChunks() 功能。

使用以下命令安装此组件

composer require symfony/webpack-encore-bundle

配置

如果您使用的是 Symfony Flex，那么您已经完成！配置会预先在 config/packages/webpack_encore.yaml 文件中配置所有需要的设置。

# config/packages/webpack_encore.yaml
webpack_encore:
    # The path where Encore is building the assets - i.e. Encore.setOutputPath()
    output_path: '%kernel.project_dir%/public/build'
    # If multiple builds are defined (as shown below), you can disable the default build:
    # output_path: false
    
    # if using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
    # crossorigin: 'anonymous'

    # preload all rendered script and link tags automatically via the http2 Link header
    # preload: true

    # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
    # strict_mode: false
    
    # if you have multiple builds:
    # builds:
        # pass "frontend" as the 3rg arg to the Twig functions
        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}

        # frontend: '%kernel.project_dir%/public/frontend/build'

    # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
    # Available in version 1.2
    # Put in config/packages/prod/webpack_encore.yaml
    # cache: true

使用方法

如果您使用 Symfony Flex 安装此组件，Webpack Encore 的 "Split Chunks" 功能默认启用。否则，请手动启用。

// webpack.config.js
// ...
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .setManifestKeyPrefix('build/')

    .addEntry('entry1', './assets/some_file.js')

+   .splitEntryChunks()
// ...

当您启用 splitEntryChunks() 时，您可能需要多个脚本和链接标签，而不是只为 entry1.js 创建一个脚本标签和为 entry1.css 创建一个链接标签。这是因为 Webpack "分割" 文件 以实现更大的优化。

为了帮助您，Encore 会编写一个包含每个 "entry" 所需文件的 entrypoints.json 文件。

例如，为了渲染特定 "entry"（例如 entry1）的所有 script 和 link 标签，您可以

{# any template or base layout where you need to include a JavaScript entry #}

{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('entry1') }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    {{ encore_entry_link_tags('entry1') }}
{% endblock %}

假设 entry1 需要包含两个文件 - build/vendor~entry1~entry2.js 和 build/entry1.js，那么 encore_entry_script_tags() 等同于

<script src="{{ asset('build/vendor~entry1~entry2.js') }}"></script>
<script src="{{ asset('build/entry1.js') }}"></script>

如果您需要更多控制，您可以使用 encore_entry_js_files() 和 encore_entry_css_files() 方法来获取所需文件的列表，然后手动循环创建 script 和 link 标签。

在请求中多次渲染（例如，生成 PDF）

当您渲染脚本或链接标签时，组件足够智能，不会在同一个请求中重复相同的 JavaScript 或 CSS 文件。这防止了您在渲染依赖于相同文件的多个条目时，重复出现 <link> 或 <script> 标签。

然而，在某些情况下，您可能需要在请求中多次渲染同一条目的脚本和链接标签。例如，如果在一个请求中渲染多个 Twig 模板以生成多个 PDF 文件。

在这种情况下，在每个渲染之前，您需要“重置”内部缓存，以便组件重新渲染之前已渲染的 CSS 或 JS 文件。例如，在一个控制器中

// src/Controller/SomeController.php

use Symfony\WebpackEncoreBundle\Asset\EntrypointLookupInterface;

class SomeController
{
    public function index(EntrypointLookupInterface $entrypointLookup)
    {
        $entrypointLookup->reset();
        // render a template

        $entrypointLookup->reset();
        // render another template

        // ...
    }
}

如果您有多个构建，您也可以自动连接 Symfony\WebpackEncoreBundle\Asset\EntrypointLookupCollectionInterface 并使用它来获取任何构建的 EntrypointLookupInterface 对象。