{"id":29787046,"url":"https://github.com/goldenplanetdk/symfony-webpack","last_synced_at":"2025-10-09T18:10:07.396Z","repository":{"id":62511729,"uuid":"79731744","full_name":"goldenplanetdk/symfony-webpack","owner":"goldenplanetdk","description":"Integrates Webpack to Symfony","archived":false,"fork":false,"pushed_at":"2019-12-27T12:05:22.000Z","size":154,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-07-27T19:50:44.495Z","etag":null,"topics":["bundle","frontend","symfony","symfony-bundle","webpack"],"latest_commit_sha":null,"homepage":"","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/goldenplanetdk.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}},"created_at":"2017-01-22T17:07:52.000Z","updated_at":"2024-10-17T18:02:16.000Z","dependencies_parsed_at":"2022-11-02T13:16:47.036Z","dependency_job_id":null,"html_url":"https://github.com/goldenplanetdk/symfony-webpack","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/goldenplanetdk/symfony-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenplanetdk%2Fsymfony-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenplanetdk%2Fsymfony-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenplanetdk%2Fsymfony-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenplanetdk%2Fsymfony-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goldenplanetdk","download_url":"https://codeload.github.com/goldenplanetdk/symfony-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenplanetdk%2Fsymfony-webpack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001951,"owners_count":26083226,"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","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bundle","frontend","symfony","symfony-bundle","webpack"],"created_at":"2025-07-27T19:12:26.837Z","updated_at":"2025-10-09T18:10:07.391Z","avatar_url":"https://github.com/goldenplanetdk.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg align=\"right\" src=\"https://cloud.githubusercontent.com/assets/3078595/22329543/5f1dae0c-e3ca-11e6-82d1-2e64e8b94703.png\"\u003e\n\n[![Build Status](https://travis-ci.org/goldenplanetdk/symfony-webpack.svg?branch=master)](https://travis-ci.org/goldenplanetdk/symfony-webpack)\n[![Coverage Status](https://coveralls.io/repos/github/goldenplanetdk/symfony-webpack/badge.svg)](https://coveralls.io/github/goldenplanetdk/symfony-webpack)\n\n\u003cbr\u003e\n\n[Installation](#installation)\n\n[Usage](#usage)\n\n[Run](#compile)\n\n[Documentation](https://github.com/goldenplanetdk/symfony-webpack/wiki)\n\n\u003cimg type=\"clear-floated-image\" src=\"https://cloud.githubusercontent.com/assets/3078595/22329385/b18b9218-e3c9-11e6-99ce-db83b05480aa.png\" src-origin=\"http://placehold.it/2000x1/fff/fff\"\u003e\n\nInstallation\n============\n\n```shell\ncomposer require goldenplanetdk/symfony-webpack\n```\n\nAdd to `AppKernel`:\n\n```php\nnew GoldenPlanet\\WebpackBundle\\GoldenPlanetWebpackBundle(),\n```\n\nGenerate `webpack.symfony.config.js` and install dependencies:\n\n```\napp/console webpack:setup\n```\n\n\u003cbr\u003e\n\nUsage\n===\n\nTwig function and tag\n----\n\nYou can choose between `webpack_asset` function and `webpack` tag\n\n#### `webpack_asset` function\n```\nwebpack_asset(resource, type = null)\n```\n\n`type` is `js` or `css`, leave `null` to guess the type. For `css` this function could return `null` if no CSS would\nbe extracted from provided entry point. If you are sure that there will be some CSS, you could just ignore this.\nOtherwise, you could use `webpack` tag as it handles this for you (omits the `\u003clink/\u003e` tag entirely in that case).\n\n#### `webpack` tag\n```twig\n{% webpack [js|css] [named] [group=...] resource [resource, ...] %}\n    Content that will be repeated for each compiled resource.\n    {{ asset_url }} - inside this block this variable holds generated URL for current resource\n{% end_webpack %}\n```\n\nAs with `webpack_asset` function, provide `js`, `css` or leave it out to guess the type.\n\nSee usage with `named` and `group` in [Commons chunk](#commons-chunk) section.\n\nKeep in mind that you must provide hard-coded asset paths in both tag and function.\nThis is to find all available assets in compile-time.\n\nScripts and Stylesheets\n----\n\nSingle entry point (`.js`, `.ts`, `.coffee` etc.) in `twig` templates:\n\n```twig\n\u003clink rel=\"stylesheet\" href=\"{{ webpack_asset('@acmeHello/script.js', 'css') }}\"\u003e\n\u003cscript defer src=\"{{ webpack_asset('@acmeHello/script.js') }}\"\u003e\u003c/script\u003e\n```\n\n*Note: here `@acmeHello` is equal to `@AcmeHelloBundle/Resources/assets`*\n\nMultiple entry points:\n\n```twig\n{% webpack js\n    '@acmeHello/main.js'\n    '@acmeHello/another-entry-point.js'\n%}\n    \u003cscript defer src=\"{{ asset_url }}\"\u003e\u003cscript\u003e\n{% end_webpack %}\n```\n\n```twig\n{% webpack css\n    '@acmeHello/main.js'\n    '@acmeHello/another-entry-point.js'\n%}\n    \u003clink rel=\"stylesheet\" href=\"{{ asset_url }}\"\u003e\u003cscript\u003e\n{% end_webpack %}\n```\n\nTo avoid having a `link` element with an empty `href` in the DOM when the script may possibly not emit a stylesheet, test the value returned from `webpack_asset` before inserting the `link` element:\n\n```twig\n{% set cssUrl = webpack_asset('@acmeHello/script.js', 'css') %}\n{% if cssUrl %}\n    \u003clink rel=\"stylesheet\" href=\"{{ cssUrl }}\"\u003e\n{% endif %}\n```\n\nCommons chunk\n----\n\nThis bundle supports both single and several\n[commons chunks](https://webpack.js.org/plugins/commons-chunk-plugin/),\nbut you have to configure this explicitly.\n\nIn your `webpack.config.js`:\n\n```js\nconfig.plugins.push(\n    new webpack.optimize.CommonsChunkPlugin({\n        name: 'commons'\n    })\n);\n```\n\nIn your base template:\n\n```twig\n{% webpack named css 'commons' %}\n    \u003clink rel=\"stylesheet\" href=\"{{ asset_url }}\"/\u003e\n{% end_webpack %}\n{# ... #}\n{% webpack named js 'commons' %}\n    \u003cscript src=\"{{ asset_url }}\"\u003e\u003c/script\u003e\n{% end_webpack %}\n```\n\nYou can also use `webpack_named_asset` twig function instead of `webpack` tags.\n\nNamed commons chunk\n---\n\nIn webpack configuration it is allowed to put commonly used libraries (shared dependencies) in a separate file, while still having reference to the same singleton library when using `require`. For example, to put `jquery` and `lodash` to a separate file (a commons chunk) add following to your `webpack.symfony.config.js`:\n\n```js\nmodule.exports = function makeWebpackConfig(symfonyOptions) {\n\n\tconfig.entry = symfonyOptions.entry;\n\tconfig.entry['jquery-and-lodash'] = ['jquery', 'lodash'];\n\t\n\t// ...\n\t\t\n\tconfig.plugins.push(\n\t\tnew webpack.optimize.CommonsChunkPlugin({\n\t\t\tnames: [\n\t\t\t\t'jquery-and-lodash', // match entry point name(s)\n\t\t\t],\n\t\t}),\t\t\n\t)\n}\n```\n\nThen add the script that will load the common libs before any other script that may depend on it. \nUse the `webpack_named_asset` function to inject the actual compiled asset path:\n\n```twig\n\u003cscript defer src=\"{{ webpack_named_asset('jquery-and-lodash') }}\"\u003e\u003cscript\u003e\n```\n\nCommons chunk may contain other type of assets:\n\n```twig\n\u003clink rel=\"stylesheet\" href=\"{{ webpack_named_asset('shared', 'css') }}\"\u003e\n```\n\nThe rendered output of above in production mode will be something like:\n\n```html\n\u003cscript src=\"/compiled/jquery-and-lodash.64ff80bf.c95f999344d5b2777843.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"/compiled/shared.0a8efeb2b0832928e773.css\"\u003e\n```\n\nWebpack can also be configured to determine the commonly used libraries in multiple entry points automatically. Support for these is planned. \n\nOther resource types\n---\n\nYou can pass any kind of resources to webpack with `webpack_asset` function for single entry point:\n\n```twig\n\u003cimg src=\"{{ webpack_asset('@AcmeHelloBundle/Resources/public/images/background.jpg') }}\"\u003e\n```\n\nOr with `webpack` tag for multiple entry points:\n\n```\n\u003cul class=\"nav nav-pills social-icons\"\u003e\n\t{% webpack\n\t\t'@AcmeHelloBundle/Resources/public/images/facebook.jpg'\n\t\t'@AcmeHelloBundle/Resources/public/images/twitter.jpg'\n\t\t'@AcmeHelloBundle/Resources/public/images/youtube.jpg'\n\t%}\n\t\t\u003cli\u003e\n\t\t\t\u003cimg src=\"{{ asset_url }}\"\u003e\n\t\t\u003c/li\u003e\n\t{% end_webpack %}\n\u003c/ul\u003e\n```\n\nRequiring within scripts and stylesheets\n---\n\nInside `script.js`:\n\n```js\nimport URI from 'urijs';\nimport {Person} from './models/person';\n\nrequire('./other-script.ts');\n```\n\nInside `stylesheet.css`, `less`, `sass` or `stylus`:\n\n```css\nbody {\n    background: url('~@AcmeBundle/Resources/images/bg.jpg');\n}\n```\n\n\u003cbr\u003e\n\nCompile\n===\n\nUsing Symfony `app/console` to run webpack commands\n---\n\nCompile for dev environment:\n\n```bash\napp/console webpack:compile\n```\n\nWatch for changes and compile\n\n```bash\napp/console webpack:watch\n```\n\nWatch for changes, compile and automatically reload browser tab(s)\n\n```bash\napp/console webpack:dev-server\n```\n\nCompile as part of deployment in production environment:\n\n```bash\napp/console webpack:compile --env=prod\n```\n\n\u003cbr\u003e\n\nDocumentation\n===\n\nFull documentation is available at [Wiki pages of this repository](https://github.com/goldenplanetdk/symfony-webpack/wiki)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldenplanetdk%2Fsymfony-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoldenplanetdk%2Fsymfony-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldenplanetdk%2Fsymfony-webpack/lists"}