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

Change Log

next

added

• Add plugin method to the raw pack.
• Add hints configuration options.
• Add minimum compression ratio option to the compression pack.
• Add edition packages to ease setup of basic packmule projects.
• Add fix option for linter configuration in the sass, javascript and typescript packs.
• Add resolve-url-loader in the sass pack to resolve relative URLs.
• Add cache method to the service-worker pack to configure runtime caching.
• Add modules method to the sass pack to be able to use CSS modules.
• Add browserstack support to the server utility.
• Add svelte pack.
• Add environment pack.
• Add less pack.
• Add watch pack.
• Add cache pack.
• Add target pack.
• Add analyzer pack.

changed

• Split packmule options into options and hints.
• Change the package namespace from @pixelart to @packmule.
• Convert project to a monorepo structure and move packs to separate packages.
• Accept multiple configurations on the development server.
• Disable verbose output on the clean-webpack-plugin used by the clean pack.
• Disable the overlay on the HMR client by default.
• Disable the default vendors chunk configuration on webpack.
• Remove watch configuration from the core and introduce a separate watch pack.
• Disable bundle chunks in watch mode for faster builds.
• Pass options and hints to the packs process function.
• Use eslint-webpack-plugin instead of eslint-loader.

removed

• Remove constructor on the clean pack.

fixed

• Prepend polyfills to the entry array in the HMR pack to work properly.
• Disable webpackbar when webpack is run with the --json option.

misc

• Add tests.
• Configure nightly builds.

1.0.0

• Initial release.