From 80f6233bf5fb13185a1d1cd42fe964ae967ae0cf Mon Sep 17 00:00:00 2001 From: bocharsky-bw Date: Tue, 2 May 2023 21:09:16 +0200 Subject: [PATCH] Move the docs out from the README.md --- .symfony.bundle.yaml | 3 + README.md | 351 +---------------------------------------- doc/index.rst | 363 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 374 insertions(+), 343 deletions(-) create mode 100644 .symfony.bundle.yaml create mode 100644 doc/index.rst diff --git a/.symfony.bundle.yaml b/.symfony.bundle.yaml new file mode 100644 index 00000000..b84c48be --- /dev/null +++ b/.symfony.bundle.yaml @@ -0,0 +1,3 @@ +branches: ["main"] +maintained_branches: ["main"] +doc_dir: "doc" diff --git a/README.md b/README.md index 81a5e3e7..c862d606 100644 --- a/README.md +++ b/README.md @@ -1,347 +1,12 @@ -# WebpackEncoreBundle: Symfony integration with Webpack Encore! +WebpackEncoreBundle: Symfony integration with Webpack Encore! +============================================================= This bundle allows you to use the `splitEntryChunks()` feature -from [Webpack Encore](https://symfony.com/doc/current/frontend.html) -by reading an `entrypoints.json` file and helping you render all of -the dynamic `script` and `link` tags needed. +from [Webpack Encore][1] by reading an `entrypoints.json` file +and helping you render all of the dynamic `script` and `link` +tags needed. -Install the bundle with: +[Read the documentation][2] -``` -composer require symfony/webpack-encore-bundle -``` - -## Configuration - -If you're using Symfony Flex, you're done! The recipe will -pre-configure everything you need in the `config/packages/webpack_encore.yaml` -file: - -```yaml -# config/packages/webpack_encore.yaml -webpack_encore: - # The path where Encore is building the assets - i.e. Encore.setOutputPath() - # if you customize this, you will also need to change framework.assets.json_manifest_path (it usually lives in assets.yaml) - output_path: '%kernel.project_dir%/public/build' - # If multiple builds are defined (as shown below), you can disable the default build: - # output_path: false - - # Set attributes that will be rendered on all script and link tags - script_attributes: - defer: true - # referrerpolicy: origin - # link_attributes: - # referrerpolicy: origin - - # 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: - # frontend: '%kernel.project_dir%/public/frontend/build' - - # pass the build name" as the 3rd argument to the Twig functions - # {{ encore_entry_script_tags('entry1', null, 'frontend') }} - - # 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 -``` - -If you're not using Flex, [enable the bundle manually](https://symfony.com/doc/current/bundles.html) -and copy the config file from above into your project. - -## Usage - -The "Split Chunks" functionality in Webpack Encore is enabled by default -with the recipe if you install this bundle using Symfony Flex. Otherwise, -enable it manually: - -```diff -// webpack.config.js -// ... - .setOutputPath('public/build/') - .setPublicPath('/build') - .setManifestKeyPrefix('build/') - .addEntry('entry1', './assets/some_file.js') - -+ .splitEntryChunks() -// ... -``` - -When you enable `splitEntryChunks()`, instead of just needing 1 script tag -for `entry1.js` and 1 link tag for `entry1.css`, you may now need *multiple* -script and link tags. This is because Webpack ["splits" your files](https://webpack.js.org/plugins/split-chunks-plugin/) -into smaller pieces for greater optimization. - -To help with this, Encore writes an `entrypoints.json` file that contains -all of the files needed for each "entry". - -For example, to render all of the `script` and `link` tags for a specific -"entry" (e.g. `entry1`), you can: - -```twig -{# any template or base layout where you need to include a JavaScript entry #} - -{% block javascripts %} - {{ parent() }} - - {{ encore_entry_script_tags('entry1') }} - - {# or render a custom attribute #} - {# - {{ encore_entry_script_tags('entry1', attributes={ - defer: true - }) }} - #} -{% endblock %} - -{% block stylesheets %} - {{ parent() }} - - {{ encore_entry_link_tags('entry1') }} -{% endblock %} -``` - -Assuming that `entry1` required two files to be included - `build/vendor~entry1~entry2.js` -and `build/entry1.js`, then `encore_entry_script_tags()` is equivalent to: - -```twig - - -``` - -If you want more control, you can use the `encore_entry_js_files()` and -`encore_entry_css_files()` methods to get the list of files needed, then -loop and create the `script` and `link` tags manually. - -## Rendering Multiple Times in a Request (e.g. to Generate a PDF) - -When you render your script or link tags, the bundle is smart enough -not to repeat the same JavaScript or CSS file within the same request. -This prevents you from having duplicate `` or ` + + +If you want more control, you can use the ``encore_entry_js_files()`` and +``encore_entry_css_files()`` methods to get the list of files needed, then +loop and create the ``script`` and ``link`` tags manually. + +Rendering Multiple Times in a Request (e.g. to Generate a PDF) +-------------------------------------------------------------- + +When you render your script or link tags, the bundle is smart enough +not to repeat the same JavaScript or CSS file within the same request. +This prevents you from having duplicate ```` or ``