{"id":21045162,"url":"https://github.com/fullpipe/twig-webpack-extension","last_synced_at":"2025-04-10T03:56:35.492Z","repository":{"id":9263825,"uuid":"61433424","full_name":"fullpipe/twig-webpack-extension","owner":"fullpipe","description":"Inject your webpack entry points into twig templates with easy.","archived":false,"fork":false,"pushed_at":"2023-03-04T05:48:55.000Z","size":351,"stargazers_count":51,"open_issues_count":9,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T03:56:29.447Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fullpipe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-18T12:55:14.000Z","updated_at":"2023-08-20T11:29:57.000Z","dependencies_parsed_at":"2024-06-18T14:15:56.461Z","dependency_job_id":null,"html_url":"https://github.com/fullpipe/twig-webpack-extension","commit_stats":{"total_commits":51,"total_committers":5,"mean_commits":10.2,"dds":"0.27450980392156865","last_synced_commit":"a4047ebc806b991aeda6031cee04ffeff9671894"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullpipe%2Ftwig-webpack-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullpipe%2Ftwig-webpack-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullpipe%2Ftwig-webpack-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullpipe%2Ftwig-webpack-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullpipe","download_url":"https://codeload.github.com/fullpipe/twig-webpack-extension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154999,"owners_count":21056542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T14:20:20.888Z","updated_at":"2025-04-10T03:56:35.463Z","avatar_url":"https://github.com/fullpipe.png","language":"PHP","readme":"# Twig Webpack extension\n\n[![Latest Version on Packagist](https://img.shields.io/github/release/fullpipe/twig-webpack-extension.svg)](https://packagist.org/packages/fullpipe/twig-webpack-extension)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)\n[![Total Downloads](https://img.shields.io/packagist/dt/fullpipe/twig-webpack-extension.svg)](https://packagist.org/packages/fullpipe/twig-webpack-extension/stats)\n[![Tests](https://github.com/fullpipe/twig-webpack-extension/workflows/Tests/badge.svg)](https://github.com/fullpipe/twig-webpack-extension/actions)  \n\nInject your webpack entry points into twig templates with easy.\n\nThis repo provides a Twig extension that joins Webpack resultant files with Twig template engine in an easy way.\n\nThis approach allows the dynamic insertion of the css stylesheets and js scripts with Webpack generated hash.\n\n\u003e Also works well with **extract-text-webpack-plugin**\n\n## Install\n\n```bash\ncomposer require fullpipe/twig-webpack-extension\n```\n\n### Set up Webpack\n\nYou need to install the `webpack-manifest-plugin`\n```bash\nnpm install webpack-manifest-plugin --save\n```\n\nor with Yarn\n```bash\nyarn add webpack-manifest-plugin\n```\n\nConfigure `webpack.config.js`\n```js\n// webpack.config.js\n\nvar ManifestPlugin = require('webpack-manifest-plugin');\nconst path = require(\"path\");\n\nmodule.exports = {\n  ...\n  entry: {\n    vendor: [\"jquery\", \"lodash\"],\n    main: './src/main.js'\n  },\n  output: {\n    ...\n    filename: \"js/[name].js\",\n    path: path.resolve(__dirname, \"../public/build\"),\n    publicPath: '/build/', // required\n  },\n  plugins: [\n    new ManifestPlugin(),\n    new ExtractTextPlugin({\n      filename: \"css/[name].css\",\n      publicPath: \"/build/\",\n    }),\n  ]\n}\n```\n\n### Register as a Twig extension\n\n```yaml\n# app/config/services.yml\n\nparameters:\n    webpack.manifest: \"%kernel.root_dir%/../public/build/manifest.json\" #should be absolute\n    webpack.public_dir: \"%kernel.root_dir%/../public\" #your public-dir\n\nservices:\n    twig_extension.webpack:\n        class: Fullpipe\\TwigWebpackExtension\\WebpackExtension\n        public: false\n        arguments:\n            - \"%webpack.manifest%\"\n            - \"%webpack.public_dir%\"\n        tags:\n            - { name: twig.extension }\n```\n\n### Inject entry points to your Twig\n\n```twig\n{# app/Resources/views/base.html.twig #}\n\n\u003chead\u003e\n    ...\n    {% webpack_entry_css 'main' %}\n    {% webpack_entry_css 'inline' inline %}\n\u003c/head\u003e\n\n\u003cbody\u003e\n    ...\n    {% webpack_entry_js 'vendor' %}\n    {% webpack_entry_js 'main' defer %}\n    {% webpack_entry_js 'second' async %}\n    {% webpack_entry_js 'inline' inline %}\n\u003c/body\u003e\n```\n\n### Example\n\nSee working [example](example) with [webpack.config.js](example/frontend/webpack.config.js).\n\n## Hashing output files avoiding the browser cache\n\nIf you use `[hash]` or `[chunkhash]`:\n\n```js\n// webpack.config.js\n...\noutput: {\n  ...\n  filename: '[name].[chunkhash].js',\n  chunkFilename: '[name].[chunkhash].js'\n},\nplugins: [\n  new ExtractTextPlugin({\n    ...\n    filename: 'css/[name].[contenthash].css',\n  }),\n]\n```\n\nYou should clear twig cache after each webpack compilation.  \nSo for dev environment do not use `[hash]` or `[chunkhash]`.\n","funding_links":[],"categories":["Twig"],"sub_categories":["Extensions"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullpipe%2Ftwig-webpack-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullpipe%2Ftwig-webpack-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullpipe%2Ftwig-webpack-extension/lists"}