fullpipe / twig-webpack-extension
Inject your webpack entry points into twig templates with easy.
Installs: 589 181
Dependents: 7
Suggesters: 0
Security: 0
Stars: 51
Watchers: 3
Forks: 14
Open Issues: 9
Requires (Dev)
- phpunit/phpunit: ^6|^7|^8
- dev-master
- v4.0.2
- v4.0.1
- v4.0.0
- v3.1.0
- v3.0.1
- v3.0.0
- v2.0.1
- v2.0.0
- v1.0.1
- v1.0
- dev-dependabot/npm_and_yarn/example/frontend/minimist-and-minimist-and-mkdirp-1.2.8
- dev-dependabot/npm_and_yarn/example/frontend/json5-and-webpack-1.0.2
- dev-dependabot/npm_and_yarn/example/frontend/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/example/frontend/loader-utils-and-webpack-cli-1.4.2
- dev-dependabot/npm_and_yarn/example/frontend/async-2.6.4
- dev-php8
This package is auto-updated.
Last update: 2024-10-04 09:04:59 UTC
README
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
or with Yarn
yarn add webpack-manifest-plugin
Configure 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/", }), ] }
Register as a Twig extension
# 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 }
Inject entry points to your Twig
{# 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>
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', }), ]
You should clear twig cache after each webpack compilation.
So for dev environment do not use [hash]
or [chunkhash]
.