# nicepck

> Ready Webpack 5 config for frond-end app using Typescript, SASS, HTML or PUG

Latest version **1.1.5** (published 2022-08-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install nicepck
pnpm add nicepck
yarn add nicepck
bun add nicepck
```

Provides the command `pck`.

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2022-08-29 |
| First published | 2022-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 20 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | el-tumero |
| Maintainers | el-tumero |

## Links

- npm: https://www.npmjs.com/package/nicepck
- Repository: https://github.com/el-tumero/nicepck
- Homepage: https://github.com/el-tumero/nicepck#readme
- Issues: https://github.com/el-tumero/nicepck/issues
- npm.io page: https://npm.io/package/nicepck

## Dependencies (20)

- [pug](https://npm.io/package/pug.md) ^3.0.2
- [sass](https://npm.io/package/sass.md) ^1.52.3
- [webpack](https://npm.io/package/webpack.md) ^5.73.0
- [keypress](https://npm.io/package/keypress.md) ^0.2.1
- [cli-color](https://npm.io/package/cli-color.md) ^2.0.2
- [ts-loader](https://npm.io/package/ts-loader.md) ^9.3.0
- [css-loader](https://npm.io/package/css-loader.md) ^6.7.1
- [pug-loader](https://npm.io/package/pug-loader.md) ^2.4.0
- [typescript](https://npm.io/package/typescript.md) ^4.7.4
- [file-loader](https://npm.io/package/file-loader.md) ^6.2.0
- [html-loader](https://npm.io/package/html-loader.md) ^3.1.2
- [sass-loader](https://npm.io/package/sass-loader.md) ^13.0.0
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.1.3
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.10.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.7
- [postcss-scss](https://npm.io/package/postcss-scss.md) ^4.0.4
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^7.0.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.9.2
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.0

## Recent versions

- 1.1.5 (latest) — 2022-08-29
- 1.1.4 — 2022-07-16
- 1.1.3 — 2022-06-23
- 1.1.2 — 2022-06-23
- 1.1.1 — 2022-06-23
- 1.1.0 — 2022-06-23
- 1.0.9 — 2022-06-22
- 1.0.8 — 2022-06-21
- 1.0.7 — 2022-06-21
- 1.0.6 — 2022-06-21
- 1.0.5 — 2022-06-21
- 1.0.4 — 2022-06-21
- 1.0.2 — 2022-06-20
- 1.0.1 — 2022-06-20
- 1.0.0 — 2022-06-20

## README

# nicepck

## Intro

A couple of scripts for using Webpack 5 in more friendly way.
Currently our Webpack config is made for Typescript, HTML, Pug, Scss, Tailwind

## Contents

1. [Quick start](#quick-start)
2. [Importing assets](#importing-assets)
    * [Images](#images)
    * [Fonts](#fonts)
3. [Multipage setup](#multipage-setup)
    * [Example setup](#example-setup)

<a href="#quick-start"></a>

## Quick start

### Basic setup

* Install with `npm install nicepck` or `yarn add nicepck`.
* Type `npm run pck init` or `yarn pck init`. This command will bring you to menu where you can select starter options for project (config files/template).
* You can optionally create config files and generate template via `npm run pck config` and `npm pck template` or `yarn pck config` and `yarn pck template`
* If you want to use the `.pug` extension instead of `.html` you need to change `"html"` to `"pug"` in the **`nice.config.json`** file:

```json
{
    "htmlTemplate": "pug"
}
```

* Add following scripts to the **`package.json`** file:

```json
    "scripts": {
        "dev": "pck",
        "build": "pck build"
    }
```

* `"dev"` - for development server with [HMR](https://webpack.js.org/concepts/hot-module-replacement/) enabled
* `"build"` - for bundling files to `dist` folder
* Then simply run `yarn dev` or `npm run dev` or `yarn build` or `npm run build`

<a href="#importing-assets"></a>

## Importing assets

<a href="#images"></a>

### Images

* HTML

```html
    <img src="<path_to_your_image>" />
```

* PUG

```js
    img(src=require("<path_to_your_image>"))
```

* CSS

```css
    #testDiv {
         background: url("<path_to_your_image>");
    }
```

* TypeScript

```ts
    import testImg from "<path_to_your_image>"
    const image = new Image()
    image.src = testImg
```
<a href="#fonts"></a>

### Fonts

* CSS

```css

@font-face {
    font-family: TestFont;
    src: url("<path_to_your_font>");
}

body {
    font-family: TestFont
}

```

<a href="#multipage-setup"></a>

## Multipage setup

In **`nice.config.json`** you can create new entries. For every new entry you need to create a `html` or `pug` file (depending on your setup) with the same name as .ts file.

<a href="#example-setup"></a>

### Example setup

* nice.config.js:

```json
{
  "htmlTemplate": "pug",
  "entries": [
    "./src/index.ts",
    "./src/other.ts",
  ]
}
```

* file structure:

```bash
src
├── assets
│   ├── fonts
│   │   └── Font.ttf
│   └── images
│       └── img.png
├── index.pug
├── index.ts
├── other.pug
├── other.ts
└── styles.scss
```

* index.pug:

```js
doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Welcome
    body 
        h1 NicePck Starter
        img(src=require("./assets/images/img.png"))
        a(href="./other.pug") Other
```

### Note
If you create an entry for example in <b>'./src/other/other.ts'</b> then to a use a link to a subpage you should include only a name of .html / .pug file in ``` <a> ``` tag:
```html
    <a href="other.html">Other</a>
```
#### Made with love by el-tumero

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