packmule

packmule is an opinionated, plugin-based configuration generator for webpack.

• 🏇 Small and simple API.
• 🧰 Plugins for many use cases.
• 🔧 Build your own plugin for custom use cases.
• ⚡ Optimized webpack settings for HTTP/2.

import Packmule from '@packmule/core';
import EntryPack from '@packmule/entry-pack';
import OutputPack from '@packmule/output-pack';
import TypeScriptPack from '@packmule/typescript-pack';

const packmule = new Packmule('production');

packmule.add(new EntryPack('main.ts'));
packmule.add(new OutputPack('public/', '/'));
packmule.add(new TypeScriptPack());

return packmule.generate();

Setup

Current Release

Run the following command within your project directory to install the default edition of packmule which includes the @packmule/core package and most relevant packs.

npm install --save-dev @packmule/default

The complete edition can be installed to have all packs available.

npm install --save-dev @packmule/complete

Alternatively, to have full control over the installed packages, it's possible to install the core package and individual packs.

npm install --save-dev @packmule/core @packmule/entry-pack @packmule/output-pack @packmule/typescript-pack

Nightly Build

All @packmule packages have a nightly build tagged on the npm registry.

npm install --save-dev @packmule/<package>@nightly

Editions

packmule provides editions which install a pre-defined set of packmule packages including various packs and utilities.

It's recommended to install packmule packages individually but editions provide an easy way to get started quickly.

• Default Edition - A basic set of packs and utilities.
• Complete Edition - The full set of packs and utilities.

Plugins

packmule plugins are called packs and each one handles generation of a specific webpack configuration part. Several packs expose API methods to include or exclude files from processing using file globbing or regular expression patterns.

• Alias Pack - Configure webpack aliases.
• Analyzer Pack - Analyze the bundle size.
• Assets Pack - Create an asset map file for use with hashed file names.
• Cache Pack - Configure the webpack cache.
• Chunk Pack - Wrap the webpack chunk-plugin.
• Compression Pack - Generate gzip and brotli versions of configured assets.
• Copy Pack - Copy files.
• Entry Pack - Define entrypoints for webpack.
• Environment Pack - Populate process.env via .env files and at runtime.
• Hot Module Replacement Pack - Include the hot module replacement plugin for development.
• Image Optimization Pack - Optimize images using imagemin.
• JavaScript Pack - Process JS including Babel support.
• Less Pack - Compile less to CSS.
• Log Pack - Configure console logging.
• Manifest Pack - Generate a web app manifest.
• Name Pack - Configure the Webpack configuration name.
• Notification Pack - Enable desktop notifications for development builds.
• Output Pack - Define the output options for webpack.
• Performance Pack - Configure entry and asset sizes.
• Raw Pack - Merge raw webpack configuration directly.
• Runtime Pack - Configure the webpack runtime chunk.
• Sass Pack - Compile and optimize Sass/SCSS to CSS including PostCSS processing.
• Service Worker Pack - Generate a simple service worker using workbox.
• Sprite Pack - Generate a SVG-based vector-sprite.
• Svelte Pack - Handle svelte single-file-component files.
• Target Pack - Set the target environment for the bundle.
• TypeScript Pack - Compile TS to JS including Babel support.
• Vue Pack - Handle vue single-file-component files.
• Watch Pack - Handle file watching.

Utilities

• Development Server - Simple development server via browser-sync.

License

MIT license