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
composer require fullpipe/twig-webpack-extensionYou need to install the webpack-manifest-plugin
npm install webpack-manifest-plugin --saveor with Yarn
yarn add webpack-manifest-pluginConfigure webpack.config.js
// webpack.config.js
var ManifestPlugin = require('webpack-manifest-plugin');
const path = require("path");
module.exports = {
...
entry: {
vendor: ["jquery", "lodash"],
main: './src/main.js'
},
output: {
...
filename: "js/[name].js",
path: path.resolve(__dirname, "../public/build"),
publicPath: '/build/', // required
},
plugins: [
new ManifestPlugin(),
new ExtractTextPlugin({
filename: "css/[name].css",
publicPath: "/build/",
}),
]
}# app/config/services.yml
parameters:
webpack.manifest: "%kernel.root_dir%/../public/build/manifest.json" #should be absolute
webpack.public_dir: "%kernel.root_dir%/../public" #your public-dir
services:
twig_extension.webpack:
class: Fullpipe\TwigWebpackExtension\WebpackExtension
public: false
arguments:
- "%webpack.manifest%"
- "%webpack.public_dir%"
tags:
- { name: twig.extension }{# app/Resources/views/base.html.twig #}
<head>
...
{% webpack_entry_css 'main' %}
{% webpack_entry_css 'inline' inline %}
</head>
<body>
...
{% webpack_entry_js 'vendor' %}
{% webpack_entry_js 'main' defer %}
{% webpack_entry_js 'second' async %}
{% webpack_entry_js 'inline' inline %}
</body>See working example with webpack.config.js.
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',
}),
]You should clear twig cache after each webpack compilation.
So for dev environment do not use [hash] or [chunkhash].