Minipack

A webpack-based, local playground for the modern web technologies.

NOTE: This project is currently in beta, if you find any issues please report it here

How it works

Internally, the playground is just a set of webpack plugins/loaders. We use the same, good, official webpack-dev-server to serve the final JavaScript bundle.

It works by walking through the current directory contents to determine suitable entry point files for webpack. An entry point file can be:

1. index.[ext]:

Used to customize the HTML output (it will be transpiled if necessary).

Example:

<!-- index.html -->
<div id="root"></div>

2. app.[ext]:

Used as a start point for your JavaScript (it will be transpiled if necessary) code, you should import all your scripts here.

Example:

// app.js
console.log('Hello world');

3. style.[ext]:

Used as a start point for your stylesheets (it will be transpiled if necessary). You should import all your other styles here. Otherwise, you need import them in your app.[ext] as you would normally do when using webpack.

Example:

/* style.css */
body {
  color: green;
}

You can think of these entry points as the HTML/CSS/JS tabs you would see in any online playground such as Codepen, JSFiddle. All of these files are optional.

Extensions mapping

We use the file extensions as a source of truth in order to determine whether we need to perform transpilation or not.

Extensions	Loader	Notes
js,jsx,es	babel-loader	Using preset-env and preset-react
html	html-loader
css	css-loader	In addition to postcss-cssnext and autoprefixer

Installation

$ npm install -g minipack

Usage

Usage:  mini [command] [options]

Commands:
  start [options]  Start a dev server in the current path

Options:
  --version  Show version number                                       [boolean]
  --help     Show help                                                 [boolean]

If you have any problems, do not hesitate to file an issue:
  https://github.com/glitchapp/glitch/issues/new

Prerequisites

• Node.js: v8.4.0 (or later)
• npm: v5.4.0 (or later)

Contributing

We value and appreciate your help, please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Contributors

Thanks goes to these wonderful people (emoji key):

Ahmed T. Ali 📝 💻 🎨 📖 🤔 🔌 👀 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

Acknowledgments

Inspired by the awesome work of Facebook in their create-react-app package.

This project would not have been possible without these great projects:

• Node.js
• webpack
• webpack-dev-server

License

This project is licensed under the MIT License terms