Webup: HTML/ES6 Bundler with Plugin Architecture

1.8.0 · abandoned · verified Tue Apr 21

Webup is a minimalist builder/bundler for web projects, primarily concerned with reading, joining, and splitting HTML, CSS, and JavaScript files. Unlike opinionated, all-in-one bundlers, Webup's core is intentionally 'lazy,' relying heavily on a robust plugin and preset system to perform actual bundling, optimization, and transformation tasks. The current stable version is 1.8.0, published in 2021. The project has an open-ended release cadence, with the last update several years ago. Its key differentiator is its modular approach, requiring users to explicitly configure or choose presets and plugins to achieve a desired build process, offering high flexibility but requiring more setup than integrated solutions. It supports entry points, shell templates, destination paths, and source inclusion.

Common errors

```
Error: No presets defined. Webup cannot perform any build tasks.
```
cause The `presets` array was omitted or empty in the Webup configuration.

fix Ensure your `webup` configuration includes at least `presets: ['default']` after installing `webup-preset-default`.
```
SyntaxError: Cannot use import statement outside a module
```
cause Attempting to use ES module `import` syntax in a CommonJS environment without proper transpilation or Node.js configuration.

fix Ensure your Node.js project is configured for ES modules (e.g., `"type": "module"` in `package.json`) or use `require()` syntax if strictly operating in CommonJS.

Warnings

gotcha Webup's core is deliberately minimalist and 'does nothing' by default. You must explicitly define `presets` in your configuration to enable any build functionality.
Fix: Always include `presets: ['default']` (after installing `webup-preset-default`) or your custom presets in the `webup` configuration object.
breaking The project appears to be unmaintained. The last commit on GitHub was in April 2021, and the last npm publish was 3 years ago. This means there will be no future updates, bug fixes, or security patches.
Fix: Consider migrating to a more actively maintained bundler (e.g., Vite, Rollup, Webpack) for new projects or for existing projects requiring ongoing support and security updates.

Install

npm install webup npm
yarn add webup yarn
pnpm add webup pnpm

Imports

webup
wrong:
```
import { webup } from 'webup';
const webup = require('webup');
```
correct:
```
import webup from 'webup';
```
The primary function is likely a default export, common in older bundler patterns. CommonJS `require` might work in Node, but ESM `import` is preferred for modern projects.

Quickstart

Demonstrates a basic Webup build configuration, bundling HTML, CSS, and JavaScript into a specified destination using the default preset.

import webup from 'webup';

// Ensure you have webup-preset-default installed: npm install webup-preset-default
// and potentially create your source files:
// public/index.html
// public/my-app.html
// public/js/main.js

webup({
  entry: 'public/index.html',
  shell: 'public/my-app.html',
  dest: 'build/index.html',
  sources: ['public/**/*', './node_modules/**/*', '!./node_modules/**/*.test.js'], // Include node_modules for dependencies
  plugins: [], // Custom plugins can be added here
  presets: ['default'] // The 'default' preset (from webup-preset-default) is essential
})
.then(() => {
  console.log('Webup build successful!');
})
.catch(error => {
  console.error('Webup build failed:', error);
});

view raw JSON →