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)52608.8k↓10.7%12[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 1mo 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 93% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity48

Moderate usage in the ecosystem

Community24

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

1217d 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

[shoot/shoot

Shoot aims to make providing data to your templates more manageable

40229.9k2](/packages/shoot-shoot)[redant/twig-components

Define reusable components in Twig.

3819.8k1](/packages/redant-twig-components)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)