Jetpack

🚀 Jetpack – webpack made more convenient.

Jetpack wraps webpack to create a smoother developer experience. Jetpack can be used instead of webpack, webpack-cli, webpack-dev-server and webpack-dev-middleware without writing any configuration. Jetpack is a thin wrapper around webpack, and can be extended with any of the webpack configuration.

  • Sensible defaults to handle modern JavaScript, CSS and images.
  • Preconfigured Babel with @babel/preset-env and @babel/preset-react, configurable via .babelrc.
  • Preconfigured PostCSS with postcss-preset-env including autoprefixing, configurable via postcss.config.js.
  • CSS modules available by switching one config flag.
  • Automatic JSX detection switches between React.createElement or h depending on dependencies.
  • Hot reloading built in for React as well as vanilla JavaScript and CSS.
  • Automatic chunk splitting with inlined runtime and HTML generation.
  • Smooth workflow for simultaneously developing client and server applications.
  • Single dependency with hassle-free updates.
  • Run anywhere without installing locally, just like nodemon.

Why use jetpack? To avoid rolling your own custom webpack config or having to paste it from old projects. Jetpack has a set of defaults that should get you off the ground quickly. And with the proxy config or universal jetpack/serve middleware you don’t have to worry about wiring up webpack dev middleware or dev server – everything just works.

Usage

Install globally or locally:

$ npm install -g jetpack

In your project with package.json or index.js, start your app on http://localhost:3030:

$ jetpack

To build the app for production to a dist directory:

$ jetpack build

Inspect the bundle size and make up:

$ jetpack inspect

Use jetpack anywhere, anytime

One of jetpack goals is to help you run any piece of JavaScript in a browser as easily as it is to run node scripts. Install jetpack globally and point it to any file on your machine. This is an alternative to jsfiddle / codepen / codesandbox style of hacking on things.

$ jetpack ~/Desktop/magic.js

Or any project on your machine:

$ jetpack --dir ~/projects/manyverse

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares