{"id":20448155,"url":"https://github.com/xingrz/flying-assets-webpack-plugin","last_synced_at":"2026-04-19T01:38:32.781Z","repository":{"id":57239325,"uuid":"103642622","full_name":"xingrz/flying-assets-webpack-plugin","owner":"xingrz","description":"A Webpack plugin generates launching HTML for both development and production.","archived":false,"fork":false,"pushed_at":"2017-09-16T09:04:03.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-24T01:29:47.264Z","etag":null,"topics":["webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/flying-assets-webpack-plugin","language":"JavaScript","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/xingrz.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-09-15T09:57:52.000Z","updated_at":"2017-09-15T15:17:55.000Z","dependencies_parsed_at":"2022-08-29T22:22:22.778Z","dependency_job_id":null,"html_url":"https://github.com/xingrz/flying-assets-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/xingrz/flying-assets-webpack-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingrz%2Fflying-assets-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingrz%2Fflying-assets-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingrz%2Fflying-assets-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingrz%2Fflying-assets-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xingrz","download_url":"https://codeload.github.com/xingrz/flying-assets-webpack-plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingrz%2Fflying-assets-webpack-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31991720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"ssl_error","status_checked_at":"2026-04-18T20:23:29.375Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["webpack"],"created_at":"2024-11-15T10:33:03.416Z","updated_at":"2026-04-19T01:38:32.748Z","avatar_url":"https://github.com/xingrz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Flying Assets Webpack Plugin\n==========\n\n[![][npm-version]][npm-url] [![][npm-downloads]][npm-url] [![][license-img]][license-url] [![][issues-img]][issues-url]\n\nA Webpack plugin generates launching HTML for both development and production.\n\n**This plugin is at very early stage. It just works good with my practices. Please let me know your idea. Pull Requests are welcome.**\n\n## Install\n\n```sh\nnpm install --save-dev flying-assets-webpack-plugin\n```\n\n## Usage\n\n### Prepare your HTML page\n\nCurrently only [pug](https://pugjs.org/) is supported.\n\n#### `index.pug`\n\n```pug\ndoctype html\n\nmeta(charset='utf-8')\nmeta(name='viewport', content=[\n  'width=device-width',\n  'initial-scale=1.0',\n  'maximum-scale=1.0',\n  'minimum-scale=1.0',\n  'user-scalable=no'\n].join(', '))\n\ntitle My Awesome React Project\n#root #{html}\n\nmixin assets_for(chunk)\n  if assets[chunk] \u0026\u0026 assets[chunk].styles\n    each asset in assets[chunk].styles\n      link(rel='stylesheet', href=`${publicPath}${asset}`)\n  if assets[chunk] \u0026\u0026 assets[chunk].scripts\n    each asset in assets[chunk].scripts\n      script(src=`${publicPath}${asset}`)\n\n+assets_for('main')\n```\n\n#### `webpack.*.js`\n\n```js\nconst FlyingAssetsPlugin = require('flying-assets-webpack-plugin');\n\nmodule.exports = {\n  /* ... */\n  plugins: [\n    /* ... */\n    new FlyingAssetsPlugin('index.pug'),\n  ]\n};\n```\n\n### For development\n\n```js\nimport express from 'express';\n\nimport webpack from 'webpack';\nimport webpackDevMiddleware from 'webpack-dev-middleware';\nimport webpackHotMiddleware from 'webpack-hot-middleware';\nimport webpackAssetsMiddleware from 'flying-assets-webpack-plugin/middleware';\nimport webpackConfig from '../webpack.dev';\n\nconst app = express();\n\n/* ... */\n\nconst compiler = webpack(webpackConfig);\nconst publicPath = webpackConfig.output.publicPath;\n\napp.use(webpackDevMiddleware(compiler, {\n  /* ... */\n}));\napp.use(webpackHotMiddleware(compiler));\napp.get('*', webpackAssetsMiddleware(compiler));\n\n/* ... */\n```\n\n### For production\n\n```js\nimport express from 'express';\nimport { join } from 'path';\n\nconst assets = join(__dirname, '..', 'dist');\n\nconst app = express();\n\n/* ... */\n\napp.use('/assets', express.static(assets));\napp.get('*', (req, res, error) =\u003e {\n  res.sendFile(join(assets, 'index.html'));\n});\n\n/* ... */\n```\n\n## Want to do the rendering yourself?\n\nFor example, server-side rendering?\n\n#### `webpack.*.js`\n\n```js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    /* ... */\n    new FlyingAssetsPlugin({ json: true }),\n  ]\n};\n```\n\n#### Development\n\n```js\napp.use(webpackAssetsMiddleware(compiler, { render: false }));\napp.get('*', (req, res, error) =\u003e {\n  res.render('index');\n});\n```\n\n#### Production\n\n```js\napp.locals.assets = require('../dist/assets.json');\napp.locals.publicPath = require('../webpack.prod').output.publicPath;\napp.get('*', (req, res, error) =\u003e {\n  res.render('index');\n});\n```\n\n## License\n\n[MIT License](LICENSE)\n\n[npm-version]: https://img.shields.io/npm/v/flying-assets-webpack-plugin.svg?style=flat-square\n[npm-downloads]: https://img.shields.io/npm/dm/flying-assets-webpack-plugin.svg?style=flat-square\n[npm-url]: https://www.npmjs.org/package/flying-assets-webpack-plugin\n[license-img]: https://img.shields.io/npm/l/flying-assets-webpack-plugin.svg?style=flat-square\n[license-url]: LICENSE\n[issues-img]:   https://img.shields.io/github/issues/xingrz/flying-assets-webpack-plugin.svg?style=flat-square\n[issues-url]: https://github.com/xingrz/flying-assets-webpack-plugin/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxingrz%2Fflying-assets-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxingrz%2Fflying-assets-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxingrz%2Fflying-assets-webpack-plugin/lists"}