PHPackages                             goldenplanetdk/symfony-webpack - 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. [Utility & Helpers](/categories/utility)
4. /
5. goldenplanetdk/symfony-webpack

ActiveLibrary[Utility & Helpers](/categories/utility)

goldenplanetdk/symfony-webpack
==============================

Bundle to Integrate Webpack to Symfony

0.7.3(8y ago)348.0kMITPHPPHP >=5.6CI failing

Since Jan 30Pushed 6y ago12 watchersCompare

[ Source](https://github.com/goldenplanetdk/symfony-webpack)[ Packagist](https://packagist.org/packages/goldenplanetdk/symfony-webpack)[ RSS](/packages/goldenplanetdk-symfony-webpack/feed)WikiDiscussions master Synced today

READMEChangelog (9)Dependencies (17)Versions (11)Used By (0)

[![](https://cloud.githubusercontent.com/assets/3078595/22329543/5f1dae0c-e3ca-11e6-82d1-2e64e8b94703.png)](https://cloud.githubusercontent.com/assets/3078595/22329543/5f1dae0c-e3ca-11e6-82d1-2e64e8b94703.png)

[![Build Status](https://camo.githubusercontent.com/93941f0d3c32bbb139a122d02e65c11aad1fbeec4c0f3241f4bbabeb00c6b361/68747470733a2f2f7472617669732d63692e6f72672f676f6c64656e706c616e6574646b2f73796d666f6e792d7765627061636b2e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/goldenplanetdk/symfony-webpack)[![Coverage Status](https://camo.githubusercontent.com/4cc6bc5d3f6fc88edda26f6f4f5637e7339a0a8bb5b0582b6f8aad1943445574/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f676f6c64656e706c616e6574646b2f73796d666f6e792d7765627061636b2f62616467652e737667)](https://coveralls.io/github/goldenplanetdk/symfony-webpack)

[Installation](#installation)

[Usage](#usage)

[Run](#compile)

[Documentation](https://github.com/goldenplanetdk/symfony-webpack/wiki)

[![](https://cloud.githubusercontent.com/assets/3078595/22329385/b18b9218-e3c9-11e6-99ce-db83b05480aa.png)](https://cloud.githubusercontent.com/assets/3078595/22329385/b18b9218-e3c9-11e6-99ce-db83b05480aa.png)

Installation
============

[](#installation)

```
composer require goldenplanetdk/symfony-webpack
```

Add to `AppKernel`:

```
new GoldenPlanet\WebpackBundle\GoldenPlanetWebpackBundle(),
```

Generate `webpack.symfony.config.js` and install dependencies:

```
app/console webpack:setup

```

Usage
=====

[](#usage)

Twig function and tag
---------------------

[](#twig-function-and-tag)

You can choose between `webpack_asset` function and `webpack` tag

#### `webpack_asset` function

[](#webpack_asset-function)

```
webpack_asset(resource, type = null)

```

`type` is `js` or `css`, leave `null` to guess the type. For `css` this function could return `null` if no CSS would be extracted from provided entry point. If you are sure that there will be some CSS, you could just ignore this. Otherwise, you could use `webpack` tag as it handles this for you (omits the `` tag entirely in that case).

#### `webpack` tag

[](#webpack-tag)

```
{% webpack [js|css] [named] [group=...] resource [resource, ...] %}
    Content that will be repeated for each compiled resource.
    {{ asset_url }} - inside this block this variable holds generated URL for current resource
{% end_webpack %}
```

As with `webpack_asset` function, provide `js`, `css` or leave it out to guess the type.

See usage with `named` and `group` in [Commons chunk](#commons-chunk) section.

Keep in mind that you must provide hard-coded asset paths in both tag and function. This is to find all available assets in compile-time.

Scripts and Stylesheets
-----------------------

[](#scripts-and-stylesheets)

Single entry point (`.js`, `.ts`, `.coffee` etc.) in `twig` templates:

```

```

*Note: here `@acmeHello` is equal to `@AcmeHelloBundle/Resources/assets`*

Multiple entry points:

```
{% webpack js
    '@acmeHello/main.js'
    '@acmeHello/another-entry-point.js'
%}

{% end_webpack %}
```

```
{% webpack css
    '@acmeHello/main.js'
    '@acmeHello/another-entry-point.js'
%}

{% end_webpack %}
```

To avoid having a `link` element with an empty `href` in the DOM when the script may possibly not emit a stylesheet, test the value returned from `webpack_asset` before inserting the `link` element:

```
{% set cssUrl = webpack_asset('@acmeHello/script.js', 'css') %}
{% if cssUrl %}

{% endif %}
```

Commons chunk
-------------

[](#commons-chunk)

This bundle supports both single and several [commons chunks](https://webpack.js.org/plugins/commons-chunk-plugin/), but you have to configure this explicitly.

In your `webpack.config.js`:

```
config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
        name: 'commons'
    })
);
```

In your base template:

```
{% webpack named css 'commons' %}

{% end_webpack %}
{# ... #}
{% webpack named js 'commons' %}

{% end_webpack %}
```

You can also use `webpack_named_asset` twig function instead of `webpack` tags.

Named commons chunk
-------------------

[](#named-commons-chunk)

In webpack configuration it is allowed to put commonly used libraries (shared dependencies) in a separate file, while still having reference to the same singleton library when using `require`. For example, to put `jquery` and `lodash` to a separate file (a commons chunk) add following to your `webpack.symfony.config.js`:

```
module.exports = function makeWebpackConfig(symfonyOptions) {

	config.entry = symfonyOptions.entry;
	config.entry['jquery-and-lodash'] = ['jquery', 'lodash'];

	// ...

	config.plugins.push(
		new webpack.optimize.CommonsChunkPlugin({
			names: [
				'jquery-and-lodash', // match entry point name(s)
			],
		}),
	)
}
```

Then add the script that will load the common libs before any other script that may depend on it. Use the `webpack_named_asset` function to inject the actual compiled asset path:

```

```

Commons chunk may contain other type of assets:

```

```

The rendered output of above in production mode will be something like:

```

```

Webpack can also be configured to determine the commonly used libraries in multiple entry points automatically. Support for these is planned.

Other resource types
--------------------

[](#other-resource-types)

You can pass any kind of resources to webpack with `webpack_asset` function for single entry point:

```

```

Or with `webpack` tag for multiple entry points:

```

	{% webpack
		'@AcmeHelloBundle/Resources/public/images/facebook.jpg'
		'@AcmeHelloBundle/Resources/public/images/twitter.jpg'
		'@AcmeHelloBundle/Resources/public/images/youtube.jpg'
	%}

	{% end_webpack %}

```

Requiring within scripts and stylesheets
----------------------------------------

[](#requiring-within-scripts-and-stylesheets)

Inside `script.js`:

```
import URI from 'urijs';
import {Person} from './models/person';

require('./other-script.ts');
```

Inside `stylesheet.css`, `less`, `sass` or `stylus`:

```
body {
    background: url('~@AcmeBundle/Resources/images/bg.jpg');
}
```

Compile
=======

[](#compile)

Using Symfony `app/console` to run webpack commands
---------------------------------------------------

[](#using-symfony-appconsole-to-run-webpack-commands)

Compile for dev environment:

```
app/console webpack:compile
```

Watch for changes and compile

```
app/console webpack:watch
```

Watch for changes, compile and automatically reload browser tab(s)

```
app/console webpack:dev-server
```

Compile as part of deployment in production environment:

```
app/console webpack:compile --env=prod
```

Documentation
=============

[](#documentation)

Full documentation is available at [Wiki pages of this repository](https://github.com/goldenplanetdk/symfony-webpack/wiki)

###  Health Score

30

—

LowBetter than 62% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~25 days

Recently: every ~36 days

Total

9

Last Release

3234d ago

PHP version history (3 changes)0.5PHP >=5.3.2

0.7.0PHP >=7.0

0.7.3PHP >=5.6

### Community

Maintainers

![](https://www.gravatar.com/avatar/70cb0858fba5e5675e02a7420cb4dc031468bd64ed3117f1d7aa78c01280979f?d=identicon)[goldenplanet](/maintainers/goldenplanet)

---

Top Contributors

[![steven-pribilinskiy](https://avatars.githubusercontent.com/u/3078595?v=4)](https://github.com/steven-pribilinskiy "steven-pribilinskiy (14 commits)")

---

Tags

bundlefrontendsymfonysymfony-bundlewebpacksymfonyasseticassetsamdwebpackcommonjs

###  Code Quality

TestsCodeception

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/goldenplanetdk-symfony-webpack/health.svg)

```
[![Health](https://phpackages.com/badges/goldenplanetdk-symfony-webpack/health.svg)](https://phpackages.com/packages/goldenplanetdk-symfony-webpack)
```

###  Alternatives

[sulu/sulu

Core framework that implements the functionality of the Sulu content management system

1.3k1.4M196](/packages/sulu-sulu)[shopware/core

Shopware platform is the core for all Shopware ecommerce products.

585.4M526](/packages/shopware-core)[chameleon-system/chameleon-base

The Chameleon System core.

1027.9k4](/packages/chameleon-system-chameleon-base)[pimcore/pimcore

Content & Product Management Framework (CMS/PIM/E-Commerce)

3.8k3.8M465](/packages/pimcore-pimcore)[open-dxp/opendxp

Content & Product Management Framework (CMS/PIM)

9417.2k58](/packages/open-dxp-opendxp)[prestashop/prestashop

PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers.

9.1k16.8k](/packages/prestashop-prestashop)

PHPackages © 2026

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