Skip to content
Inject your webpack entry points into twig templates with easy.
PHP JavaScript HTML CSS
Branch: master
Clone or download
Latest commit f21fa9b Jan 26, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src/Fullpipe/TwigWebpackExtension
tests
.gitignore
.php_cs
.travis.yml
LICENSE
README.md
composer.json
phpunit.xml

README.md

Twig Webpack extension

Latest Version on Packagist Software License Total Downloads

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

$ composer require fullpipe/twig-webpack-extension

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

# 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

{# app/Resources/views/base.html.twig #}

(...)

<head>
(...)

    {% webpack_entry_css 'main' %}
</head>

<body>
(...)

    {% webpack_entry_js 'vendor' %}
    {% webpack_entry_js 'main' %}
</body>

or user defer/async

  {% webpack_entry_js 'main' defer %}
  {% webpack_entry_js 'not_main' async %}

Example

See working example with webpack.config.js.

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

You can’t perform that action at this time.