Twig-asset-webpack-plugin NPM

Twig Asset Webpack Plugin

Webpack 5 plugin to add assets referenced in Twig files to the compilation. This puts them in the generated manifest, so they are available when Twig looks for them.

For example, if it comes across <img src="{{ asset('images/test.png') }}" /> in a Twig file (assuming the configuration below), the plugin would look for <project-dir>/assets/images/test.png. If the file is found, it is added to the Webpack compilation process, copied to the output, and added to the manifest generated by WebpackManifestPlugin.

Install

npm install --save-dev twig-asset-webpack-plugin

yarn add --dev twig-asset-webpack-plugin

Usage

In your webpack.config.js

const path = require('path');
const { TwigAssetWebpackPlugin } = require('twig-asset-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new TwigAssetWebpackPlugin({
            assetPath: path.resolve(__dirname, './assets'),
            templatePath: path.resolve(__dirname, './templates'),
        }),
    ]
};

When webpack compiles it will now scan templatePath for Twig files with asset references. It will then add each reference to the Webpack compilation process.

Usage with Symfony Encore

In your webpack.config.js

const path = require('path');
const { TwigAssetWebpackPlugin } = require('twig-asset-webpack-plugin');

Encore
    // ...
    // We need to remove the default build prefix from the manifest or
    // when twig attempts to load the asset it will not find it.
    .setManifestKeyPrefix('')
    // ...
    .addPlugin(
        new TwigAssetWebpackPlugin({
            assetPath: path.resolve(__dirname, './assets'),
            templatePath: path.resolve(__dirname, './templates'),
        })
    )
;

TwigAssetWebpackPlugin API:

`options.assetPath` (Required)

Type: String Default: undefined

The absolute path to load asset files from. The asset reference in the Twig template should be relative to this path.

`options.templatePath` (Required*)

Type: String Default: undefined

The absolute path to search for Twig files in. This should be undefined if assetLocator is set manually.

`options.assetLocator`

Type: AssetLocatorInterface Default: undefined

The locator used to find Twig files. If templatePath is specified and this is not, an AssetLocator instance will be created with the default options.

`options.filename`

Type: String Default: undefined

The output filename format. It must end in .[ext] if specified. If not specified the webpack output.filename option will be used (the extension will automatically be replaced with .[ext]).