@battis/webpack v2.0.1

@battis/webpack

Reusable, extensible webpack configurations for different needs;

1. Single Page App: a generic single-page web app with manifest, favicons, etc. Supports TypeScript and SASS.
2. Vanilla JS: develop in TypeScript and SASS, compile to minified, uglified vanilla JavaScript and CSS.
3. Bookmarklet: build a bookmarklet in TypeScript and SASS, autogenerate JavaScript executable and documentation.

Install

npm i -D @battis/webpack

if working in a monorepo or using pnpm, you may want to explore add-peer-dependencies.

Usage

package.json

{
  "scripts": {
    "serve": "webpack serve",
    "build": "webpack"
  }
}

tsconfig.json:

{
  "extends": "@battis/webpack/tsconfig.json",
  "include": ["./src"]
}

webpack.config.mjs

import bundle from `@battis/webpack`;

export default bundle.fromTS.toVanillaJS({
  root: import.meta.dirname
});

See Choose Build below.

Common Options

Optional unless otherwise indicated.

Script configuration

Webpack configuration

Choose build

Single Page App

webpack.config.mjs

import bundle from '@battis/webpack';

export default bundle.fromTS.toSPA({
  root: import.meta.dirname
});

Meant to build a single page app, including a manifest, favicons, etc.

Image compression is also supported, but requires optional peer dependencies:

npm i -D image-minimizer-webpack-plugin imagemin imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo

Additional configuration options

SPA assets folder

📂favicon
 ∟ 📄 logo.svg
 ∟ 📄 manifest.json
 ∟ 📄 mask.svg
 ∟ 📄 startup.svg

Vanilla JS

Meant to generate vanilla JavaScript for re-use in a browser.

webpack.confg.mjs

import bundle from '@battis/webpack';

export default bundle.fromTS.toVanillaJS({
  root: import.meta.dirname
});

Additional configuration options

package.json

If, in fact, the resulting code is meant to be deployed in a browser, add the following to your package:

{
  ...
  "eslintConfig": {
    ...
    "env": {
      "browser": true
    }
  },
}

Bookmarklet

For generating a bookmarklet and accompanying documentation. The assumed project structure:

📂project
 ∟ 📄 package.json
 ∟ 📄 tsconfig.json
 ∟ 📄 webpack.config.js
 ∟ 📂src
   ∟ 📄 index.ts

This will generate the following files:

📂project
 ∟ 📄 README.md
 ∟ 📂build
   ∟ 📄 bookmarklet.js
   ∟ 📄 embed.html
   ∟ 📄 install.html

bookmarklet.js is the actual bookmarklet executable. install.html is a preformatted page that guides the user through a drag-and-drop install of the bookmarklet. embed.html is the <iframe/> embed code for the install page. README.md displays basic information about the package, including the embedded install page.

GitHub Pages

This assumes that GitHub Pages has been enabled for the repo, deployed from the main branch root.

webpack.config.mjs

import bundle from '@battis/webpack';

export default bundle.fromTS.toBookmarklet({
  root: import.meta.dirname,
  title: 'Click me!'
});

Additional configuration options