https://github.com/lucas-aragno/webpack-up
CLI tool to setup webpack and react/preact on a given directory
https://github.com/lucas-aragno/webpack-up
boilerplate preact react template webpack
Last synced: 8 months ago
JSON representation
CLI tool to setup webpack and react/preact on a given directory
- Host: GitHub
- URL: https://github.com/lucas-aragno/webpack-up
- Owner: lucas-aragno
- Created: 2017-03-03T03:12:22.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-03T04:42:03.000Z (almost 9 years ago)
- Last Synced: 2025-05-05T12:47:12.731Z (8 months ago)
- Topics: boilerplate, preact, react, template, webpack
- Language: JavaScript
- Size: 34.2 KB
- Stars: 38
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack Up
CLI tool to jumpstart projects using webpack + babel + react/preact
## Install
```bash
npm install -g webpack-up
```
## How to use it
I 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:
```bash
webpack-up --manager yarn --framework react --entrypoint 'my-app/index.js'
```
This command will set up webpack babel and react on `` 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 ).
You 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 )
## Example
Let's say I have a folder called `my-app` with the following content:
```
.
├── index.html
├── package.json
├── src
│ ├── App.js
│ └── index.js
```
Where `App.js` contain the main React/Preact component:
React example:
```javascript
import React, { Component } from 'react'
class App extends Component {
render () {
return (
hi
)
}
}
export default App
```
Preact example:
```javascript
import { h, Component } from 'preact'
export default class App extends Component {
render (props, state) {
return (
hello
)
}
}
```
and `index.js` just contain the logic for the render and re imports
React example:
```javascript
import React from 'react'
import { render } from 'react-dom'
import App from './App'
document.addEventListener('DOMContentLoaded', event => (
render(
,
document.getElementById('root')
)
))
```
Preact example:
```javascript
import { h, render } from 'preact'
import App from './App'
document.addEventListener('DOMContentLoaded', event => (
render(, document.getElementById('root'))
))
```
I can run `webpack-up` on this directory like:
```bash
webpack-up . --manager yarn --framework react --entrypoint "./src/index.js"
```
(Please notice the `"` on the entrypoint option)
I'll get a source tree like:
```
.
├── index.html
├── node_modules
├── package.json
├── public
├── src
├── webpack.config.js
└── yarn.lock
```
And I'm ready to roll. I can change my `index.html` to be something like:
```html
My Kick ass app
```
And then run `./node_modules/.bin/webpack-dev-server` and you got yourself a webpack-dev server with your react app!
You could also tweak that same `index.html` to use `./public/bundle.js` instead and run `webpack -p` to get your production build.
## Why?
Why 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