PHPackages                             simperfit/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. simperfit/twig-webpack-extension

ActiveLibrary[Templating & Views](/categories/templating)

simperfit/twig-webpack-extension
================================

Inject your webpack entry points into twig templates with easy.

v2.2.0(5y ago)0107.8kMITPHP

Since Jun 18Pushed 5y agoCompare

[ Source](https://github.com/izisolutions/twig-webpack-extension)[ Packagist](https://packagist.org/packages/simperfit/twig-webpack-extension)[ RSS](/packages/simperfit-twig-webpack-extension/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependencies (1)Versions (10)Used By (0)

Twig Webpack extension
======================

[](#twig-webpack-extension)

> 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-dev

# or with Yarn
$ yarn add webpack-manifest-plugin --dev
```

Configure `webpack.config.js`

```
// webpack.config.js

var ManifestPlugin = require('webpack-manifest-plugin');

(...)

module.exports = {

  (...)

  entry: {
    vendor: ["jquery", "lodash"],
    main: './src/main.js'
  },
  output: {
    (...)
    path: './js'
    publicPath: '/',    // required

    (...)
  },
  plugins: [
    new ManifestPlugin(),
    new ExtractTextPlugin({
      filename: './../css/[name].css',
      publicPath: '/'
    }),

  (...)
  ]
}
```

### Register as a service the Twig extension inside Symfony

[](#register-as-a-service-the-twig-extension-inside-symfony)

```
# app/config/services.yml

parameters:
    (...)

    webpack.manifest: "%kernel.root_dir%/../web/build/manifest.json" #should be absolute
    webpack.public_path_js: /js/
    webpack.public_path_css: /css/

services:
    (...)

    twig_extension.webpack:
        class: Fullpipe\TwigWebpackExtension\WebpackExtension
        public: false
        arguments:
            - "%webpack.manifest%"
            - "%webpack.public_path_js%"
            - "%webpack.public_path_css%"
        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_js 'vendor' %}
    {% webpack_entry_js 'main' %}

```

### 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',
    publicPath: '/'
  }),

  (...)
]
```

> You should clear twig cache after each webpack compilation. So for dev environment do not use `[hash]` or `[chunkhash]`.

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity69

Established project with proven stability

 Bus Factor1

Top contributor holds 55.6% 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 ~297 days

Recently: every ~369 days

Total

6

Last Release

2123d ago

Major Versions

v1.0.1 → v2.0.02016-12-30

### Community

Maintainers

![](https://www.gravatar.com/avatar/173bf959da1defad517a0782ae2e0c328c404f425503ddfb5e6700ae50bb86d8?d=identicon)[Simperfit](/maintainers/Simperfit)

---

Top Contributors

[![fullpipe](https://avatars.githubusercontent.com/u/929659?v=4)](https://github.com/fullpipe "fullpipe (10 commits)")[![benatespina](https://avatars.githubusercontent.com/u/3951376?v=4)](https://github.com/benatespina "benatespina (4 commits)")[![Simperfit](https://avatars.githubusercontent.com/u/3451634?v=4)](https://github.com/Simperfit "Simperfit (4 commits)")

---

Tags

twigextensionwebpack

### Embed Badge

![Health badge](/badges/simperfit-twig-webpack-extension/health.svg)

```
[![Health](https://phpackages.com/badges/simperfit-twig-webpack-extension/health.svg)](https://phpackages.com/packages/simperfit-twig-webpack-extension)
```

###  Alternatives

[fullpipe/twig-webpack-extension

Inject your webpack entry points into twig templates with easy.

52608.8k7](/packages/fullpipe-twig-webpack-extension)[shoot/shoot

Shoot aims to make providing data to your templates more manageable

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

Define reusable components in Twig.

3819.8k1](/packages/redant-twig-components)[umanit/twig-image-extension

An extension to facilitate the integration of responsive images' markup in Twig templates.

1042.2k](/packages/umanit-twig-image-extension)

PHPackages © 2026

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