prepacked
Use the power of webpack to effectively build in development and then ship for production with minimal setup.
you
do:
What 👌🏼 ️ship production level react apps
🎉 enjoy 1st class development experience
😘 use latest web technologies
😱 avoid the hassle and intimidation inherent with modern day project configuration
prepacked
does:
What 👋 assumes you may be new to this javascript app building business
🗿 holds an opinion. favors convention over configuration
✨ avoids magic. requires explicit command instead of making implicit assumptions
Quick Look
webpack.config.js:
// looks to see if you've told the node "environmnet" to be in productionvar isDev = processenvNODE_ENV !== 'production'var makeConfig = moduleexports =
package.json:
Development
Running npm start
in your terminal will allow you to:
- write your javascript using es6 and jsx
- style your app using CSS Modules & cssnext
- view app at
localhost:8080
. changes automatically update on every save.
Production
Running npm run build
in your terminal will spit out minified, bundled, sourcemapped js and css goodness for you to ship a la:
public
├── app.js
├── app.js.gz
├── app.js.map
├── index.html
├── style.css
├── style.css.gz
└── style.css.map
To Document:
- how prepacked generates html & how to customize it
- adding feature flags like DEV && PROD
- adding entry point for styles
- resolves
- devServer configuration / adding host for hot reloading over the network
spec: feature flags (DEV) compression tree shaking resolves es6 (spread) features extract stylesheet for prod hot reloading css next local dev server