Webmake: CommonJS Browser Bundler

1.1.2 · maintenance · verified Sun Apr 19

Webmake is a Node.js-based module bundler designed to package CommonJS modules for use in web browsers. It aims to replicate Node.js's native module resolution logic, allowing developers to organize browser-side JavaScript code using the familiar CommonJS `require` syntax and `module.exports` pattern. Beyond standard JavaScript, it features direct support for bundling CSS and HTML files, enabling them to be `require`d as modules and injected into the DOM. The project's current stable version is 1.1.2, with its last release dating back to 2020. This extended period without updates suggests the project is in a maintenance-only mode rather than active feature development. A key differentiator for `webmake` is its strict adherence to Node.js's CommonJS module system for client-side environments, setting it apart from more modern bundlers that primarily focus on ES Modules and broader ecosystem integrations. It provides a simple CLI for bundling, generating a self-contained JavaScript file ready for browser inclusion.

Common errors

```
Module not found: [module-path]
```
cause The `require()` path specified does not correctly resolve to an existing module file or a package entry point based on Node.js resolution rules.

fix Verify the exact path in your `require()` statement. Ensure the file exists, the path is relative or an npm package name, and file extensions are correctly handled (or omitted for `.js`/`.json`).
```
SyntaxError: Unexpected token 'import' (or 'export')
```
cause You are attempting to bundle a JavaScript file containing ES Module syntax (`import` or `export`) with `webmake`, which only understands CommonJS.

fix Before bundling with `webmake`, transpile your ES Modules to CommonJS using a tool like Babel. Alternatively, refactor your modules to use `require()` and `module.exports`, or switch to a bundler that natively supports ES Modules.
```
webmake: command not found
```
cause The `webmake` command-line tool is not installed globally or is not in your system's PATH.

fix Install `webmake` globally using `npm install -g webmake` or ensure it's listed as a `devDependency` and run it via `npx webmake` or your `package.json` scripts.

Warnings

breaking The module resolution logic was significantly updated in `v0.3.16` to align more closely with Node.js design. This corrected corner cases where previous resolution results might have differed, potentially breaking bundles that relied on the former, non-standard behavior.
Fix: Review module resolution paths for any modules that might have implicitly relied on `webmake`'s pre-v0.3.16 non-standard path resolution. Adjust `require()` paths if modules can no longer be found.
gotcha Webmake is exclusively designed for bundling CommonJS modules. It does not natively understand or process ES Modules (`import`/`export` syntax). Attempting to bundle modules using ES Module syntax directly will result in parsing errors.
Fix: Ensure all source modules use CommonJS `require()` and `module.exports`. If using ES Modules, transpile them to CommonJS (e.g., with Babel) *before* passing them to `webmake`, or consider a different bundler like Webpack or Rollup that supports ESM natively.
gotcha The `webmake` project has seen minimal activity since its last release in 2020. This indicates it is in maintenance mode and may not receive updates for compatibility with newer JavaScript language features, Node.js versions, or security patches.
Fix: Evaluate whether `webmake` meets your current project's needs, especially if you require support for modern JavaScript features (e.g., optional chaining, nullish coalescing), TypeScript, or a more active development ecosystem. Consider alternative bundlers for new projects or if encountering compatibility issues.
gotcha Older versions of `webmake` (specifically pre-v0.3.13) explicitly demanded Node.js v0.8 due to dependencies like `fs2`. While newer versions likely run on more recent Node.js, extreme compatibility issues might arise with very old or very new Node.js environments.
Fix: Always run `npm install` to ensure `webmake`'s dependencies are correctly resolved for your Node.js version. If encountering issues, check the `engines` field in the `package.json` for specific Node.js version requirements, or try a Node.js LTS version.

Install

npm install webmake npm
yarn add webmake yarn
pnpm add webmake pnpm

Imports

webmake
wrong:
```
import webmake from 'webmake';
```
correct:
```
const webmake = require('webmake');
```
Webmake is a CommonJS module that is primarily used as a CLI tool. Programmatic usage requires `require()`. It does not support ES Module `import` syntax and only exports a single function.

Quickstart

Demonstrates bundling a simple CommonJS application into a single file for browser execution, with visible output.

// quickstart.js (entry point)
var inc = require("./increment");
var a = 1;
var result = inc(a);
document.body.innerHTML += `
  <p>Result from bundled JS:</p>
  <pre>Incremented value: ${result}</pre>
  <p>This content was generated by a CommonJS module bundled with webmake.</p>
`;

// increment.js
var add = require("./add");
module.exports = function (val) { return add(val, 1); };

// add.js
module.exports = function () {
  var sum = 0, i = 0, args = arguments, l = args.length;
  while (i < l) sum += args[i++];
  return sum;
};

/*
To run this example:
1. Save the above as three separate files: quickstart.js, increment.js, add.js
2. Open your terminal in the same directory.
3. If not already installed, install webmake globally:
   npm install -g webmake
4. Bundle the files:
   webmake quickstart.js bundle.js
5. Create an HTML file (e.g., index.html):
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Webmake Quickstart</title>
   </head>
   <body>
     <h1>Webmake CommonJS Bundler Example</h1>
     <script src="bundle.js"></script>
   </body>
   </html>
6. Open index.html in a web browser to see the output.
*/

view raw JSON →