# @pota/webpack-skeleton

> The skeleton with the foundational webpack configuration for bootstrapping new projects.

Latest version **2.2.5** (published 2022-03-07) · 0 weekly downloads

## Install

```sh
npm install @pota/webpack-skeleton
pnpm add @pota/webpack-skeleton
yarn add @pota/webpack-skeleton
bun add @pota/webpack-skeleton
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.5 |
| Published | 2022-03-07 |
| First published | 2021-10-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM |
| Node | >=16 |
| Dependencies | 47 |
| Unpacked size | 57.9 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Paul |
| Maintainers | psimk |

## Links

- npm: https://www.npmjs.com/package/@pota/webpack-skeleton
- Repository: https://github.com/mediamonks/pota
- Homepage: https://github.com/mediamonks/pota#readme
- Issues: https://github.com/mediamonks/pota/issues
- npm.io page: https://npm.io/package/@pota/webpack-skeleton

## Dependencies (47)

- [sass](https://npm.io/package/sass.md) ^1.42.1
- [kleur](https://npm.io/package/kleur.md) ^4.1.4
- [dotenv](https://npm.io/package/dotenv.md) ^10.0.0
- [eslint](https://npm.io/package/eslint.md) ^8.2.0
- [core-js](https://npm.io/package/core-js.md) ^3.18.1
- [postcss](https://npm.io/package/postcss.md) ^8.3.8
- [webpack](https://npm.io/package/webpack.md) ^5.57.1
- [get-port](https://npm.io/package/get-port.md) ^6.0.0
- [prettier](https://npm.io/package/prettier.md) ^2.4.1
- [cross-env](https://npm.io/package/cross-env.md) ^7.0.3
- [ts-loader](https://npm.io/package/ts-loader.md) ^9.2.6
- [css-loader](https://npm.io/package/css-loader.md) ^6.3.0
- [typescript](https://npm.io/package/typescript.md) ^4.5.2
- [url-loader](https://npm.io/package/url-loader.md) ^4.1.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.15.5
- [@types/node](https://npm.io/package/@types/node.md) ^17.0.10
- [file-loader](https://npm.io/package/file-loader.md) ^6.2.0
- [log-symbols](https://npm.io/package/log-symbols.md) ^5.0.0
- [npm-run-all](https://npm.io/package/npm-run-all.md) ^4.1.5
- [sass-loader](https://npm.io/package/sass-loader.md) ^12.1.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.8.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.3.6
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.2
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.0
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) ^5.1.0
- [imagemin-svgo](https://npm.io/package/imagemin-svgo.md) ^9.0.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^6.1.1
- [@pota/authoring](https://npm.io/package/@pota/authoring.md) ^1.0.0
- [imagemin-optipng](https://npm.io/package/imagemin-optipng.md) ^8.0.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.15.6
- [imagemin-jpegtran](https://npm.io/package/imagemin-jpegtran.md) ^7.0.0
- [sort-package-json](https://npm.io/package/sort-package-json.md) ^1.52.0
- [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) ^5.0.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.7.3
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^10.2.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.3.2
- [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) ^6.4.2
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.3.0
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.4.2
- [@mediamonks/prettier-config](https://npm.io/package/@mediamonks/prettier-config.md) ^1.0.0
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^3.2.0
- [@types/mini-css-extract-plugin](https://npm.io/package/@types/mini-css-extract-plugin.md) ^2.4.0
- [@types/webpack-bundle-analyzer](https://npm.io/package/@types/webpack-bundle-analyzer.md) ^4.4.1
- [fork-ts-checker-webpack-plugin](https://npm.io/package/fork-ts-checker-webpack-plugin.md) ^6.3.3
- [friendly-errors-webpack-plugin](https://npm.io/package/friendly-errors-webpack-plugin.md) npm:@soda/friendly-errors-webpack-plugin@^1.8.0
- [image-minimizer-webpack-plugin](https://npm.io/package/image-minimizer-webpack-plugin.md) ^2.2.0
- [@types/friendly-errors-webpack-plugin](https://npm.io/package/@types/friendly-errors-webpack-plugin.md) ^0.1.4

## Recent versions

- 2.2.5 (latest) — 2022-03-07
- 2.2.4 — 2022-02-15
- 2.2.3 — 2022-02-03
- 2.2.2 — 2022-02-02
- 2.2.1 — 2022-01-27
- 2.2.0 — 2022-01-26
- 2.1.2 — 2022-01-24
- 2.1.1 — 2022-01-24
- 2.1.0 — 2022-01-24
- 2.0.0 — 2022-01-20
- 1.0.2 — 2022-01-19
- 1.0.1 — 2022-01-19
- 1.0.0 — 2022-01-13
- 1.0.0-rc.47 — 2022-01-13
- 1.0.0-rc.46 — 2022-01-13
- … 53 more at https://npm.io/package/@pota/webpack-skeleton/versions

## README

# webpack-skeleton [![downloads](https://badgen.now.sh/npm/dm/@pota/webpack-skeleton)](https://npmjs.org/package/@pota/webpack-skeleton)

<div align="center">The skeleton with the <b>foundational webpack configuration</b> for bootstrapping new projects.</div>
<br />

## Setup 🚀

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

```bash
npx @pota/create webpack my-webpack-app
```

<!--
During project creation, everything above this comment should _ideally_ be replaced with a `Quick Start` on how to run & build the project, referencing the project title in the heading, instead of the skeleton's.
-->

## Standards 📒

This project follows the
[MediaMonks Frontend Coding Standards](https://github.com/mediamonks/frontend-coding-standards)

## Features 🔋

### Pota Commands

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

```bash
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](https://webpack.js.org/configuration/cache/) 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](https://webpack.js.org/configuration/devtool/#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/...`).                        |

<br />

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

```bash
npm run dev # or npx pota dev
```

| Option                  | Type                                                                          | Default                                                    | Description                                                                                                                                      |
| ----------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **`cache`**             | `{Boolean}`                                                                   | `true`                                                     | Toggle webpack's [caching](https://webpack.js.org/configuration/cache/) 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](https://webpack.js.org/configuration/devtool/#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.                                                                                                        |

<br />

_hidden TODOs_

<!--
- TODO: describe how to set defaults for these options in `.pota/commands/{command}.js`
- TODO: describe how to create new commands (possible link to `@pota/cli` docs)
-->

<hr />

### 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.                   |

<hr />

### JavaScript / TypeScript

_hidden TODOs_

<!--
- TODO: describe `ts-loader` usage how `ts-loader` and `babel` transpile TS and
- TODO: describe `babel` usage and it plugins
- TODO: describe what ES version is the output and how to control it (`browserslist`)
- TODO: describe where polyfills go
-->

<hr />

### CSS

_hidden TODOs_

<!--
- TODO: CSS Modules
- TODO: SCSS
- TODO: PostCSS
- TODO: Modernizr?
- TODO: normalize.css?
-->

<hr />

### Images

_hidden TODOs_

<!--
- TODO: describe how we handle SVGs (e.g. `file.svg` vs `file.svg?raw`)
- TODO: describe how we compress image files and how to configure it
-->

<hr />

### Misc. Assets

_hidden TODOs_

<!--
- TODO: describe what other assets the skeleton supports
-->

<hr />

### Linting & Formatting

_hidden TODOs_

<!--
- TODO: describe how `eslint` is included and how to configure it
- TODO: describe how `prettier` is included and how to configure it
-->

<hr />

### Service Worker

The skeleton has opt-in support for
[service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)
through the help of [workbox](https://developers.google.com/web/tools/workbox/).

To get started, you can create `/src/service-worker.ts` file to customize workbox and its many
[modules](https://developers.google.com/web/tools/workbox/modules) .

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

```ts
/// <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.

### Deployment

#### Remote Sync

For simple deployments, when you just want to upload your files to a remote server, you can use the
`rsync` script.

Note: before using the `rsync` script, make sure to configure a host in in the "package.json"

```bash
npm pkg set config.host="github.com"
```

_hidden TODOs_

<!--
- TODO: describe how `rsync` and the associated `upload-build` script works and how to configure it
-->

<hr />

### Git

_hidden TODOs_

<!--
- TODO: describe `lint-staged` and `husky?`
- TODO: describe how we extract ticket identifiers from branch names
-->

<hr />

### Continuous Integration / Continuous Deployment

#### Bitbucket

`webpack-skeleton` comes with `bitbucket-pipelines.yml`, pre-configured to run `check-types`, `lint`
and `test` scripts.

_hidden TODOs_

<!--
- TODO: describe how to use parallelization
- TODO: describe how to setup deploys with `rsync`
-->

---
_Source: https://npm.io/package/@pota/webpack-skeleton · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._