3 ms·

I have tried to get in to React all week. The technology is easy, but it's Webpack that I'm having trouble enjoying. All I want is are two simple configs. A de

I have tried to get in to React all week. The technology is easy, but it's Webpack that I'm having trouble enjoying. All I want is are two simple configs. A dev one with a server/hot loader, and a prod one that concats/minifies. ES2015. That's it. That just doesn't exist out there. It's either no decent production bundler, or it's like 15 files and 900 lines of configuration that seem completely overkill. I don't know. I don't have time to learn how the tooling works, but I also don't want a bunch of magic. Angular 2 is looking really good right now even with the (still very incomplete) angular-cli tool. Dang. I just want my simple gulpfile back.

danabramov 11y ago
Check out https://github.com/ryanflorence/react-project https://github.com/ryanflorence/react-project, it’s very new but seems similar to what you are aiming for.
- plexicle 11y ago
  Thanks! I'll take a look tonight.
- octref 11y ago
  Isn't that exactly what he's not aiming for, namely "15 files and 900 lines of configuration that seem completely overkill"? This seems to remove complexity but it just hides the complexity in the dependency. When something doesn't work out or he wants to change the behavior he still has to delve into these "15 files and 900 lines of configuration".
  - danabramov 11y ago
    It has focus on great production features without diving into config until you are ready. For something more approachable but less powerful check out https://github.com/insin/nwb https://github.com/insin/nwb.
mst 11y ago
Maybe look at the reactuate configs - those don't seem horribly complex and are a nice prepack.
tomdale 11y ago
Have you tried ember-cli? It does all of this out of the box.
phase_9 11y ago
Hey plexicle - I also bumped into this one when I started with webpack; I've written the approach I use as a blog post, hope this helps: http://jonnyreeves.co.uk/2016/simple-webpack-prod-and-dev-config http://jonnyreeves.co.uk/2016/simple-webpack-prod-and-dev-co...
- plexicle 11y ago
  Thank you very much. That post was very helpful!
EdwardMSmith 11y ago
The result of me doing the same thing is here: https://github.com/edwardmsmith/react-starter https://github.com/edwardmsmith/react-starter I didn't find the webpack stuff to be too overwhelming, and split dev and prod into two webpack files. `npm start` to start the dev server and `npm deploy` for a production build. The production build produces two files - a vendor file that contains vendor code, and a client file that contains custom code. It probably contains more than you're interested in (redux, tests, etc.) but it should be clear how to strip that out.
- plexicle 11y ago
  That looks perfect! Does it minify/concat? I will dive deeper this evening in any case. Thanks!
  - EdwardMSmith 11y ago
    Yes, when you run Webpack with the -p (production) flag, as I do in the `deploy`, it minimizes the output: https://github.com/webpack/docs/wiki/optimization https://github.com/webpack/docs/wiki/optimization

danabramov 11y ago

Check out https://github.com/ryanflorence/react-project https://github.com/ryanflorence/react-project, it’s very new but seems similar to what you are aiming for.

plexicle 11y ago
Thanks! I'll take a look tonight.
octref 11y ago
Isn't that exactly what he's not aiming for, namely "15 files and 900 lines of configuration that seem completely overkill"? This seems to remove complexity but it just hides the complexity in the dependency. When something doesn't work out or he wants to change the behavior he still has to delve into these "15 files and 900 lines of configuration".
- danabramov 11y ago
  It has focus on great production features without diving into config until you are ready. For something more approachable but less powerful check out https://github.com/insin/nwb https://github.com/insin/nwb.

mst 11y ago

Maybe look at the reactuate configs - those don't seem horribly complex and are a nice prepack.

tomdale 11y ago

Have you tried ember-cli? It does all of this out of the box.

phase_9 11y ago

Hey plexicle - I also bumped into this one when I started with webpack; I've written the approach I use as a blog post, hope this helps: http://jonnyreeves.co.uk/2016/simple-webpack-prod-and-dev-config http://jonnyreeves.co.uk/2016/simple-webpack-prod-and-dev-co...

plexicle 11y ago
Thank you very much. That post was very helpful!

EdwardMSmith 11y ago

The result of me doing the same thing is here: https://github.com/edwardmsmith/react-starter https://github.com/edwardmsmith/react-starter I didn't find the webpack stuff to be too overwhelming, and split dev and prod into two webpack files. `npm start` to start the dev server and `npm deploy` for a production build. The production build produces two files - a vendor file that contains vendor code, and a client file that contains custom code. It probably contains more than you're interested in (redux, tests, etc.) but it should be clear how to strip that out.

plexicle 11y ago
That looks perfect! Does it minify/concat? I will dive deeper this evening in any case. Thanks!
- EdwardMSmith 11y ago
  Yes, when you run Webpack with the -p (production) flag, as I do in the `deploy`, it minimizes the output: https://github.com/webpack/docs/wiki/optimization https://github.com/webpack/docs/wiki/optimization