{"id":27920304,"url":"https://github.com/lucas-aragno/webpack-up","last_synced_at":"2025-05-06T20:57:50.775Z","repository":{"id":73880771,"uuid":"83751795","full_name":"lucas-aragno/webpack-up","owner":"lucas-aragno","description":"CLI tool to setup webpack and react/preact on a given directory","archived":false,"fork":false,"pushed_at":"2017-03-03T04:42:03.000Z","size":35,"stargazers_count":38,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-05T12:47:12.731Z","etag":null,"topics":["boilerplate","preact","react","template","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucas-aragno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-03-03T03:12:22.000Z","updated_at":"2023-01-05T02:05:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e023604-33da-4793-ba62-bd67de466b23","html_url":"https://github.com/lucas-aragno/webpack-up","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"8cb2a50ea8058866f559a7ac6595d928082a200d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucas-aragno%2Fwebpack-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucas-aragno%2Fwebpack-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucas-aragno%2Fwebpack-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucas-aragno%2Fwebpack-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucas-aragno","download_url":"https://codeload.github.com/lucas-aragno/webpack-up/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252769391,"owners_count":21801375,"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":["boilerplate","preact","react","template","webpack"],"created_at":"2025-05-06T20:57:50.095Z","updated_at":"2025-05-06T20:57:50.763Z","avatar_url":"https://github.com/lucas-aragno.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack Up\n\nCLI tool to jumpstart projects using webpack + babel + react/preact\n\n## Install\n\n```bash\n  npm install -g webpack-up\n```\n\n## How to use it\n\nI made this tool with the idea of adding webpack + babel + react to existing projects ( e.g adding a demo app to a library ) but you can use it to start a project from scratch you only need a directory with a `package.json` and run:\n\n```bash\nwebpack-up \u003cyour-package.json-directory\u003e --manager yarn --framework react --entrypoint 'my-app/index.js'\n```\n\nThis command will set up webpack babel and react on `\u003cyour-package.json-directory\u003e` path and use `'my-app/index.js` as the entrypoint to create the bundle with webpack ( that should be your base file that imports everything ).\n\nYou can set `--manager` to use `npm` or `yarn` ( it will use `npm` by default ) and you can set `--framework` to use `react` or `preact` ( it will use `react` by default )\n\n## Example\n\nLet's say I have a folder called `my-app` with the following content:\n\n```\n.\n├── index.html\n├── package.json\n├── src\n│   ├── App.js\n│   └── index.js\n```\n\nWhere `App.js` contain the main React/Preact component:\n\nReact example:\n\n```javascript\nimport React, { Component } from 'react'\n\nclass App extends Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        hi\n      \u003c/div\u003e\n    )\n  }\n}\n\nexport default App\n```\n\nPreact example:\n\n```javascript\nimport { h, Component } from 'preact'\n\nexport default class App extends Component {\n  render (props, state) {\n    return (\n      \u003cdiv\u003e\n        hello\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nand `index.js` just contain the logic for the render and re imports\n\nReact example:\n\n```javascript\nimport React from 'react'\nimport { render } from 'react-dom'\n\nimport App from './App'\n\ndocument.addEventListener('DOMContentLoaded', event =\u003e (\n  render(\n    \u003cApp /\u003e,\n    document.getElementById('root')\n  )\n))\n```\n\n\nPreact example:\n\n```javascript\nimport { h, render } from 'preact'\nimport App from './App'\n\ndocument.addEventListener('DOMContentLoaded', event =\u003e (\n render(\u003cApp /\u003e, document.getElementById('root'))\n))\n\n```\n\nI can run `webpack-up` on this directory like:\n\n```bash\n  webpack-up . --manager yarn --framework react --entrypoint \"./src/index.js\"\n```\n\n(Please notice the `\"` on the entrypoint option)\n\nI'll get a source tree like:\n\n```\n.\n├── index.html\n├── node_modules\n├── package.json\n├── public\n├── src\n├── webpack.config.js\n└── yarn.lock\n```\n\nAnd I'm ready to roll. I can change my `index.html` to be something like:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003e\n      My Kick ass app\n    \u003c/title\u003e\n    \u003cbody\u003e\n      \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n      \u003cscript src=\"./static/bundle.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\nAnd then run `./node_modules/.bin/webpack-dev-server` and you got yourself a webpack-dev server with your react app!\n\nYou could also tweak that same `index.html` to use `./public/bundle.js` instead and run `webpack -p` to get your production build.\n\n## Why?\n\nWhy to use this instead of [CRA](https://github.com/facebookincubator/create-react-app)? Well I like to have my configs so I can keep on working on them instead of having all those things under the hood (and even if you eject the app you might not need **all** the things that they use) so this approach will give you a basic setup that you can actually change without much effort\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucas-aragno%2Fwebpack-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucas-aragno%2Fwebpack-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucas-aragno%2Fwebpack-up/lists"}