https://github.com/el-tumero/nicepck

Package for generating basic Webpack 5 config with less configuration.
https://github.com/el-tumero/nicepck

pug sass tailwindcss typescript webpack5

Last synced: about 1 month ago
JSON representation

Package for generating basic Webpack 5 config with less configuration.

• Host: GitHub
• URL: https://github.com/el-tumero/nicepck
• Owner: el-tumero
• Created: 2022-06-20T21:41:16.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-29T17:16:16.000Z (over 2 years ago)
• Last Synced: 2024-11-14T14:26:22.706Z (about 1 month ago)
• Topics: pug, sass, tailwindcss, typescript, webpack5
• Language: JavaScript
• Homepage:
• Size: 39.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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)



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



## Importing assets



### Images

* HTML

```html

    

```

* PUG

```js

    img(src=require(""))

```

* CSS

```css

    #testDiv {

         background: url("");

    }

```

* TypeScript

```ts

    import testImg from ""

    const image = new Image()

    image.src = testImg

```



### Fonts

* CSS

```css

@font-face {

    font-family: TestFont;

    src: url("");

}

body {

    font-family: TestFont

}

```



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



### 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 './src/other/other.ts' then to a use a link to a subpage you should include only a name of .html / .pug file in ```  ``` tag:

```html

    Other

```

#### Made with love by el-tumero