{"id":16538320,"url":"https://github.com/japgolly/webtamp","last_synced_at":"2025-07-30T23:11:36.680Z","repository":{"id":19313564,"uuid":"86424058","full_name":"japgolly/webtamp","owner":"japgolly","description":"Asset bundler. Companion to bundlers like Webpack.","archived":false,"fork":false,"pushed_at":"2022-06-12T14:04:43.000Z","size":281,"stargazers_count":20,"open_issues_count":5,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T00:01:27.347Z","etag":null,"topics":["asset","bundler","cdn","html","javascript","manifest","require","scalajs","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/japgolly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-28T06:38:18.000Z","updated_at":"2023-11-21T16:48:34.000Z","dependencies_parsed_at":"2022-08-18T02:41:00.241Z","dependency_job_id":null,"html_url":"https://github.com/japgolly/webtamp","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/japgolly%2Fwebtamp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/japgolly%2Fwebtamp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/japgolly%2Fwebtamp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/japgolly%2Fwebtamp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/japgolly","download_url":"https://codeload.github.com/japgolly/webtamp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244772601,"owners_count":20508022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asset","bundler","cdn","html","javascript","manifest","require","scalajs","web"],"created_at":"2024-10-11T18:45:01.229Z","updated_at":"2025-03-21T09:32:18.297Z","avatar_url":"https://github.com/japgolly.png","language":"TypeScript","funding_links":["https://www.patreon.com/japgolly)!"],"categories":[],"sub_categories":[],"readme":"# webtamp [![Build Status](https://travis-ci.org/japgolly/webtamp.svg?branch=master)](https://travis-ci.org/japgolly/webtamp) [![npm](https://img.shields.io/npm/v/webtamp.svg)](https://www.npmjs.com/package/webtamp)\n\nwebtamp is bundler for assets.\nIt is inspired by webpack, and meant to be a companion to JS-driven bundlers like webpack.\n\nYou can do a lot of cool and useful things with webpack and its plugin community.\nHowever, there are a number of things that either can't be done at all,\nor can be done poorly and with difficulty by plugin that hack webpack in a way it wasn't meant for.\nThe webpack authors are very clear about the scope and boundaries of webpack and fair enough.\n\nwebtamp exists to address the gap.\nIt does all the things I need to do for my webapp's assets, after I've used webpack.\n\n### Contents\n- [Features](#features)\n- [Usage](#usage)\n- [Plugins](#plugins)\n- [Example](#example)\n- [Support](#support)\n- [Legal](#legal)\n\n# Features\n\n* Anything can be a top-level asset. No JS loader required or generated.\n* Dynamic filenames with hashing options.\n* Easy to integrate non-module based libraries, including those that expect relative assets with precise names.\n* CDNs supported directly.\n  * Integrity can be specified manually.\n  * Integrity can be calculated from local files.\n* Assets can be optional and will only be included when referenced (with transitivity).\n* Generate URL manifests.\n  * Formats can be JSON and Scala.\n  * Configure what is/isn't included in the manifest, and the names of entries.\n  * Includes inlined assets.\n* Inliner plugin to inline assets (usually with size \u003c n) into `data:` URIs.\n* HTML integration\n  * Replaces `\u003crequire ... \u003e` with tags that load the asset, and all of its dependencies in order.\n  * Replaces attributes like `webtamp://manifest/welcomeSvg` with real URLs.\n  * Loads from CDN and locally-served assets alike.\n  * Any missing assets fail fast.\n* Plugin system.\n\n# Usage\n\n1. Install.\n\n    ```\n    npm install --save-dev webtamp\n    ```\n\n2. Create a config file, default name is `webtamp.config.js`.\n\n   For details on all available options, see [doc/config.sample.js](doc/config.sample.js).\n\n   A good starting point with commonly-used would be:\n\n   ```js\n   const webtamp = require('webtamp');\n\n   module.exports = {\n\n     output: {\n       dir: 'dist',\n       name: '[name]-[hash].[ext]',\n     },\n\n     assets: {\n       // mandatory assets go here\n     },\n\n     optional: {\n       // optional assets go here\n     },\n\n     plugins: [\n     ],\n   };\n   ```\n\n3. Run it.\n\n    ```\n    ./node_modules/.bin/webtamp\n    ```\n\n    Or if you named your config file differently:\n    ```\n    ./node_modules/.bin/webtamp --config \u003cfile\u003e\n    ```\n\n    There's also a dry-run mode so no one gets hurt:\n    ```\n    ./node_modules/.bin/webtamp [--config \u003cfile\u003e] --dryrun\n    ```\n\n# Plugins\n\n* `webtamp.plugins.Modify.content` - Modify certain files' content.\n* `webtamp.plugins.Modify.rename` - Modify rename certain files.\n* `webtamp.plugins.Modify.{stateful,stateless}` - Modify files' names and content with more control.\n* `webtamp.plugins.Inline.data` - For files that given criteria, exclude from output and replace with a data URI.\n* `webtamp.plugins.Html.replace` - Replace `\u003crequire\u003e` tags and `webtamp://` URIs with real asset tags/links. Missing assets will fail the build.\n* `webtamp.plugins.Html.minify` - Minify HTML.\n* `webtamp.plugins.Manifest.extractCss` - Extract URLs from CSS and add those to the manifest.\n* `webtamp.plugins.Manifest.generate.scala` - Generate the asset manifest in [Scala](http://scala-lang.org/)/[Scala.JS](https://www.scala-js.org/).\n\n\n# Example\n\nThis will demonstrate a number of features. Not all but enough to be useful.\n\nSay you have a tree of files like:\n```\nexample\n├── node_modules\n│   ├── jquery\n│   │   └── dist\n│   │       └── jquery.min.js\n│   └── katex\n│       └── dist\n│           ├── fonts\n│           │   ├── KaTeX_Size1-Regular.eot\n│           │   ├── KaTeX_Size1-Regular.ttf\n│           │   ├── KaTeX_Size1-Regular.woff\n│           │   └── KaTeX_Size1-Regular.woff2\n│           ├── katex.min.css\n│           └── katex.min.js\n├── src\n│   ├── assets\n│   │   ├── tiny.svg\n│   │   └── welcome.svg\n│   └── html\n│       └── index.html\n└── vendor\n    └── blerb.js\n```\n\nAnd a webtamp config like:\n```js\nconst camelcase = require('camelcase');\nconst webtamp = require('webtamp');\n\nmodule.exports = {\n\n  output: {\n    dir: 'dist',\n    name: '[hash:8]-[name].[ext]',\n  },\n\n  assets: {\n    html: { type: 'local', src: 'src/html', files: '**/*.html', outputName: '[path]/[basename]' },\n    images: { type: 'local', src: 'src/assets', files: '**/*.{svg,ico}', manifest: camelcase },\n    main: [ 'blerb', 'katex' ],\n  },\n\n  optional: {\n\n    jquery: {\n      type: 'cdn',\n      url: `https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js`,\n      integrity: { files: 'node_modules/jquery/dist/jquery.min.js' },\n    },\n\n    blerb: [\n      { type: 'local', files: 'vendor/blerb.js', manifest: true },\n      'jquery', // This here means blerb requires jquery\n    ],\n\n    katex: [\n      { type: 'local', src: 'node_modules/katex/dist', files: '*.min.js' },\n      { type: 'local', src: 'node_modules/katex/dist', files: 'fonts/**/*', transitive: true },\n    ],\n  },\n\n  plugins: [\n    Webtamp.plugins.Inline.data(i =\u003e /\\.svg$/.test(i.dest) \u0026\u0026 i.size() \u003c 4096),\n    Webtamp.plugins.Html.replace(),\n  ],\n}\n```\n\nNow lets say the content of your `src/html/index.html` is as follows:\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- *********** ↓ replaces this ↓ *********** --\u003e\n    \u003crequire asset=\"main\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- *********** ↓ replaces these ↓ *********** --\u003e\n    \u003cimg src=\"webtamp://manifest/tinySvg\" alt=\"Tiny!\"\u003e\n    \u003cimg src=\"webtamp://manifest/welcomeSvg\" alt=\"Welcome!\"\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nAfter running webtamp, you'll have a `dist` directory like this:\n```\ndist\n├── 03bef6aa-katex.min.js\n├── 1b40ddd6-katex.min.css\n├── 5eb3a560-welcome.svg\n├── 88fee037-blerb.js\n├── fonts\n│   ├── KaTeX_Size1-Regular.eot\n│   ├── KaTeX_Size1-Regular.ttf\n│   ├── KaTeX_Size1-Regular.woff\n│   └── KaTeX_Size1-Regular.woff2\n└── index.html\n```\n\nAnd the `dist/index.html` after the `Html.replace` plugin now looks like this:\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- *********** ↓ replaces this ↓ *********** --\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js\" integrity=\"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/88fee037-blerb.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/03bef6aa-katex.min.js\"\u003e\u003c/script\u003e\n    \u003clink  href=\"/1b40ddd6-katex.min.css\" rel=\"stylesheet\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- *********** ↓ replaces these ↓ *********** --\u003e\n    \u003cimg src=\"data:image/svg+xml;base64,VGhpcyBpcyBqdXN0IGFuIGV4YW1wbGUK\" alt=\"Tiny!\"\u003e\n    \u003cimg src=\"/5eb3a560-welcome.svg\" alt=\"Welcome!\"\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Support\nIf you like what I do\n—my OSS libraries, my contributions to other OSS libs, [my programming blog](https://japgolly.blogspot.com)—\nand you'd like to support me, more content, more lib maintenance, [please become a patron](https://www.patreon.com/japgolly)!\nI do all my OSS work unpaid so showing your support will make a big difference.\n\n\n# Legal\n\n```\nCopyright 2017 David Barri\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjapgolly%2Fwebtamp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjapgolly%2Fwebtamp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjapgolly%2Fwebtamp/lists"}