@pota/webpack-skeleton NPM

webpack-skeleton

Setup 🚀

You can create a new project using the @pota/create package.

npx @pota/create webpack my-webpack-app

Standards 📒

This project follows the MediaMonks Frontend Coding Standards

Features 🔋

Pota Commands

`build` - builds the source using `webpack`.

npm run build # or npx pota build

Option	Type	Default	Description
`analyze`	`{Boolean}`	`false`	When enabled, will open a bundle report after bundling.
`cache`	`{Boolean}`	`true`	Toggles webpack's caching behavior.
`image-compression`	`{Boolean}`	`true`	Toggles image compression.
`debug`	`{Boolean}`	`false`	Sets NODE_ENV to 'development'.
`watch`	`{Boolean}`	`false`	Run build and watch for changes.
`output`	`{String}`	`./dist`	The build output directory.
`source-map`	`{false\\|`devtool`}`	`source-map` (production), `eval-source-map` (development)	Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues.
`public-path`	`{String}`	`/`	The location of static assets on your production server.
`typecheck`	`{Boolean}`	`true`	When disabled, will ignore type related errors.
`versioning`	`{Boolean}`	`false`	When enabled, will copy assets in `./static` to a versioned directory in the output (e.g. `build/version/v2/static/...`).

`dev` - starts the development service using `webpack-dev-server`.

npm run dev # or npx pota dev

Option	Type	Default	Description
`cache`	`{Boolean}`	`true`	Toggle webpack's caching behavior.
`https`	`{Boolean}`	`false`	Run the development server with HTTPS.
`open`	`{Boolean}`	`true`	Allows to configure dev server to open the browser after the server has been started.
`port`	`{Number}`	`2001`	Allows configuring the port.
`image-compression`	`{Boolean}`	`true`	Toggles image compression.
`prod`	`{Boolean}`	`false`	Sets NODE_ENV to 'production'.
`source-map`	`{false\\|`devtool`}`	`source-map` (production), `eval-source-map` (development)	Sets the style of source-map, for enhanced debugging. Disable or use faster options in you are having out of memory or other performance issues.
`typecheck`	`{Boolean}`	`true`	Toggles checking for type related errors.

hidden TODOs

Scripts

Non-Pota scripts defined in "scripts" of package.json and are runnable using npm run {script}

Script	Description
`typecheck`	Checks for type errors and unused variables/types in the source directory.
`fix`	Executes all `fix:*` and `format commands in sequence.
`fix:eslint`	Executes `eslint:lint` and fixes fixable errors.
`format`	Formats the source files using `prettier`.
`lint`	Executes all `lint:*` commands in sequence.
`lint:eslint`	Lints the source files using `eslint`.
`rsync`	Synchronizes (uploads) `dist/` files to a remote server.

JavaScript / TypeScript

hidden TODOs

CSS

hidden TODOs

Images

hidden TODOs

Misc. Assets

hidden TODOs

Linting & Formatting

hidden TODOs

Service Worker

The skeleton has opt-in support for service workers through the help of workbox.

To get started, you can create /src/service-worker.ts file to customize workbox and its many modules .

This is how an example service worker file could look like:

/// <reference lib="webworker" />

import { clientsClaim } from 'workbox-core';
import { precacheAndRoute } from 'workbox-precaching';

declare const self: ServiceWorkerGlobalScope;

clientsClaim();

// eslint-disable-next-line no-underscore-dangle
precacheAndRoute(self.__WB_MANIFEST);

Now, whenever you bundle your application for production, a service-worker.js file will be generated.

As a last step, you need to make sure to register the service worker using the serviceWorkerRegistration.ts module, see the comment in main.ts for more details.