Webpack Preset

Zero config webpack-powered development!

We're all pretty tired out by Javascript and its tooling. Webpack has a metric ton of configuration options that are particularly overwhelming when starting out, and get tiring after you've set up your eleventy billionth project. This project serves to speed up a lot of the setup process involved with getting webpack up and running.

⚠️ Keep in mind this tool is for quick prototyping and should not be used long-term in your projects. ⚠️
Once your project has gotten big or is taken seriously enough, you should invest in a full webpack setup, tuned to your specific needs. But if you want to just crank out some code really quickly, this is the best way to get started!

Installation

Want a nice Babel ES2015 setup? Just install the package and save it to your package.json file:

npm install --save webpack-preset webpack-preset-babel

Getting Started

Webpack Preset runs a small web server on port 3000 with Webpack embedded within it. It's started via the webpack-preset binary and starts a small web server to develop against.

It will look for an entry point in your package.json's main definition, falling back to a index.js file next to your package.json file.

It also serves up a small HTML file with the Webpack bundle included and a div#root for convenience. You can use your own HTML by creating a static/index.html file and you can place any other static files in that folder.

webpack-preset can be run directly from the node_modules folder:

./node_modules/.bin/webpack-preset

Or you can add it to your NPM scripts for easy access:

"scripts": {
  "start": "webpack-preset"
}

Just run npm start and that's it! You can access the page at http://localhost:3000

Roadmap

• Userland config options via package.json
• More CLI options (list installed presets, install more presets)
• Globally installable

Thanks

Bits of this project were inspired by @pirelentio's awesome sagui project. Go check it out!

License

MIT