Download the PHP package goldenplanetdk/symfony-webpack without Composer

Installation

Usage

Run

Documentation

Installation

Add to AppKernel:

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

Usage

Twig function and tag

You can choose between webpack_asset function and webpack tag

webpack_asset function

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 <link/> tag entirely in that case).

webpack tag

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

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

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

Multiple entry points:

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:

Commons chunk

This bundle supports both single and several commons chunks, but you have to configure this explicitly.

In your webpack.config.js:

In your base template:

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

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:

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

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:

Requiring within scripts and stylesheets

Inside script.js:

Inside stylesheet.css, less, sass or stylus:

Compile

Using Symfony app/console to run webpack commands

Compile for dev environment:

Watch for changes and compile

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

Compile as part of deployment in production environment:

Documentation

Full documentation is available at Wiki pages of this repository