PHPackages fullpipe/twig-webpack-extension - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. fullpipe/twig-webpack-extension ActiveLibrary[Templating & Views](/categories/templating) fullpipe/twig-webpack-extension =============================== Inject your webpack entry points into twig templates with easy. v4.0.2(3y ago)52613.0k↓52.9%11[4 issues](https://github.com/fullpipe/twig-webpack-extension/issues)[5 PRs](https://github.com/fullpipe/twig-webpack-extension/pulls)6MITPHPPHP ^7.2||^8.0 Since Jun 18Pushed 3y ago2 watchersCompare [ Source](https://github.com/fullpipe/twig-webpack-extension)[ Packagist](https://packagist.org/packages/fullpipe/twig-webpack-extension)[ RSS](/packages/fullpipe-twig-webpack-extension/feed)WikiDiscussions master Synced 3d ago READMEChangelog (10)Dependencies (2)Versions (17)Used By (6) Twig Webpack extension ====================== [](#twig-webpack-extension) [![Latest Version on Packagist](https://camo.githubusercontent.com/6b7dcb648fea2b78e49d1bbe7ef98cb03a6c596dadcdfa1ceca8952988b2a34a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f66756c6c706970652f747769672d7765627061636b2d657874656e73696f6e2e737667)](https://packagist.org/packages/fullpipe/twig-webpack-extension)[![Software License](https://camo.githubusercontent.com/074b89bca64d3edc93a1db6c7e3b1636b874540ba91d66367c0e5e354c56d0ea/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e737667)](LICENSE)[![Total Downloads](https://camo.githubusercontent.com/fcb55ca41043aa26a22b153298ecbb843a0a2d9190cc8965194a40b48c8076b6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f66756c6c706970652f747769672d7765627061636b2d657874656e73696f6e2e737667)](https://packagist.org/packages/fullpipe/twig-webpack-extension/stats)[![Tests](https://github.com/fullpipe/twig-webpack-extension/workflows/Tests/badge.svg)](https://github.com/fullpipe/twig-webpack-extension/actions) Inject your webpack entry points into twig templates with easy. This repo provides a Twig extension that joins Webpack resultant files with Twig template engine in an easy way. This approach allows the dynamic insertion of the css stylesheets and js scripts with Webpack generated hash. > Also works well with **extract-text-webpack-plugin** Install ------- [](#install) ``` composer require fullpipe/twig-webpack-extension ``` ### Set up Webpack [](#set-up-webpack) You need to install the `webpack-manifest-plugin` ``` npm install webpack-manifest-plugin --save ``` or with Yarn ``` yarn add webpack-manifest-plugin ``` Configure `webpack.config.js` ``` // webpack.config.js var ManifestPlugin = require('webpack-manifest-plugin'); const path = require("path"); module.exports = { ... entry: { vendor: ["jquery", "lodash"], main: './src/main.js' }, output: { ... filename: "js/[name].js", path: path.resolve(__dirname, "../public/build"), publicPath: '/build/', // required }, plugins: [ new ManifestPlugin(), new ExtractTextPlugin({ filename: "css/[name].css", publicPath: "/build/", }), ] } ``` ### Register as a Twig extension [](#register-as-a-twig-extension) ``` # app/config/services.yml parameters: webpack.manifest: "%kernel.root_dir%/../public/build/manifest.json" #should be absolute webpack.public_dir: "%kernel.root_dir%/../public" #your public-dir services: twig_extension.webpack: class: Fullpipe\TwigWebpackExtension\WebpackExtension public: false arguments: - "%webpack.manifest%" - "%webpack.public_dir%" tags: - { name: twig.extension } ``` ### Inject entry points to your Twig [](#inject-entry-points-to-your-twig) ``` {# app/Resources/views/base.html.twig #} ... {% webpack_entry_css 'main' %} {% webpack_entry_css 'inline' inline %} ... {% webpack_entry_js 'vendor' %} {% webpack_entry_js 'main' defer %} {% webpack_entry_js 'second' async %} {% webpack_entry_js 'inline' inline %} ``` ### Example [](#example) See working [example](example) with [webpack.config.js](example/frontend/webpack.config.js). Hashing output files avoiding the browser cache ----------------------------------------------- [](#hashing-output-files-avoiding-the-browser-cache) If you use `[hash]` or `[chunkhash]`: ``` // webpack.config.js ... output: { ... filename: '[name].[chunkhash].js', chunkFilename: '[name].[chunkhash].js' }, plugins: [ new ExtractTextPlugin({ ... filename: 'css/[name].[contenthash].css', }), ] ``` You should clear twig cache after each webpack compilation. So for dev environment do not use `[hash]` or `[chunkhash]`. ### Health Score 46 — FairBetter than 92% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity48 Moderate usage in the ecosystem Community26 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor1 Top contributor holds 80% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~267 days Recently: every ~279 days Total 10 Last Release 1264d ago Major Versions v1.0.1 → v2.0.02016-12-30 v2.0.1 → v3.0.02019-12-22 v3.1.0 → v4.0.02020-10-21 PHP version history (2 changes)v3.0.0PHP ^7.2 v4.0.1PHP ^7.2||^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/c4dd07b38b61a9dc7676bf59d8bb1777b6684d1c17ad5df2201572767cbeeaa5?d=identicon)[fullpipe](/maintainers/fullpipe) --- Top Contributors [![fullpipe](https://avatars.githubusercontent.com/u/929659?v=4)](https://github.com/fullpipe "fullpipe (56 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")[![benatespina](https://avatars.githubusercontent.com/u/3951376?v=4)](https://github.com/benatespina "benatespina (4 commits)")[![odan](https://avatars.githubusercontent.com/u/781074?v=4)](https://github.com/odan "odan (2 commits)")[![ldebrouwer-rmn](https://avatars.githubusercontent.com/u/6084647?v=4)](https://github.com/ldebrouwer-rmn "ldebrouwer-rmn (1 commits)") --- Tags twigextensionwebpack ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/fullpipe-twig-webpack-extension/health.svg) ``` [![Health](https://phpackages.com/badges/fullpipe-twig-webpack-extension/health.svg)](https://phpackages.com/packages/fullpipe-twig-webpack-extension) ``` ### Alternatives [symfony/ux-twig-component Twig components for Symfony 22018.6M356](/packages/symfony-ux-twig-component)[symfony/ux-live-component Live components for Symfony 1647.0M127](/packages/symfony-ux-live-component)[tales-from-a-dev/twig-tailwind-extra A Twig extension for Tailwind 361.1M13](/packages/tales-from-a-dev-twig-tailwind-extra)[symfony/ux-toolkit A tool to easily create a design system in your Symfony app with customizable, well-crafted Twig components 16126.1k1](/packages/symfony-ux-toolkit)[mati365/ckeditor5-symfony CKEditor 5 integration for Symfony 262.6k](/packages/mati365-ckeditor5-symfony)[umanit/twig-image-extension An extension to facilitate the integration of responsive images' markup in Twig templates. 1044.4k](/packages/umanit-twig-image-extension) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)