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

or

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]).

AssetLocator API:

options.fileMatch

Type: RegExp Default: /\.html\.twig$/

The template file names matching this will be searched for asset references.

options.assetMatch

Type: RegExp Default: /asset\((['"])((?!\1).+)\1\)/g

The regex to use searching for assets in Twig files.

options.assetMatchIndex

Type: Number Default: 2

The index to pull the file name from the assetMatch match.

options.excludedMatches

Type: RegExp[] Default: [/node_modules/]

The template file or directory names matching this will be excluded from processing.

License

MIT