mikeyamadeo / prepacked

The power of webpack with simplified configuration. All the tools to effectively build in development and then ship for production with minimal setup.

prepacked

Use the power of webpack to effectively build in development and then ship for production with minimal setup.

What you do:

👌🏼 ️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

What prepacked does:

👋 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 production
var isDev = process.env.NODE_ENV !== 'production'
var makeConfig = require('prepacked')

module.exports = makeConfig({
  isDev: isDev,
  src: './src',
  out: './public'
})

package.json:

{
  "scripts": {
    "start": "prepacked-dev-server",
    "build": "cross-env NODE_ENV=production prepacked-build-script"
  },
  "devDependencies": {
    "cross-env": "1.0.7",
    "prepacked": "1.4.0"
  }
}

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.

Hot Module Replacement

In order for Hot Module Replacement to work, you'll need the following at your app's entry:

if (module.hot) {
  module.hot.accept()
}

This code will be stripped out of production thanks to dead code elimination because module.hot will be false in production.

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

prepacked's Issues

feature ideas

This project is shaping up to provide really solid UX benefits for webpack. Great work, I would love to help.

Question:

How would I go about using prepacked as a single dependency that bootstrapped a webpack config with HMR and whatever set of babel, eslint, react dependencies I specified in a .prepackedrc file? (Even going as far as Redux, React-Bootstrap, and whatever else).

I imagine it could behave much like babel-presets.

In a development / prototyping context it would would be really nice to be able to run prepacked ./path/to/entry and not even need to include any configuration or dependencies. I have had limited success with this -- i've gotten it to work but can't help but thinking I am making it too difficult, and it definitely doesn't have as enjoyable of a UX as prepacked does already.

use webpack-configurator internally

The [https://github.com/lewie9021/webpack-configurator/issues](Webpack Configurator) project provides a nice wrapper around the webpack configuration system that makes it easy to compose different configurations and override them on a per project basis.

I think prepacked should be the public API we interact with -- the simplicity just can't be beat. I think ultimately this project should be tough on itself to ensure the smallest configuration options as possible.

Privately we use this tool to generate the final config. I think it would be easier to work with than direct object manipulation, it could pave the way for a kind of babel style presets configuration API for making it easier to work with the peer dependency and other loaders.

Happy to implement this if you think it is a good idea.