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.