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 --save-dev
# or with Yarn
$ yarn add webpack-manifest-plugin --devConfigure 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: '/'
}),
(...)
]
}# 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 }{# app/Resources/views/base.html.twig #}
(...)
<head>
(...)
{% webpack_entry_css 'main' %}
</head>
<body>
(...)
{% webpack_entry_js 'vendor' %}
{% webpack_entry_js 'main' %}
</body>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].