1.1.5 • Published 2 years ago
nicepck v1.1.5
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
Quick start
Basic setup
- Install with
npm install nicepck
oryarn add nicepck
. - Type
npm run pck init
oryarn 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
andnpm pck template
oryarn pck config
andyarn pck template
- If you want to use the
.pug
extension instead of.html
you need to change"html"
to"pug"
in thenice.config.json
file:
{
"htmlTemplate": "pug"
}
- Add following scripts to the
package.json
file:
"scripts": {
"dev": "pck",
"build": "pck build"
}
"dev"
- for development server with HMR enabled"build"
- for bundling files todist
folder- Then simply run
yarn dev
ornpm run dev
oryarn build
ornpm run build
Importing assets
Images
- HTML
<img src="<path_to_your_image>" />
- PUG
img(src=require("<path_to_your_image>"))
- CSS
#testDiv {
background: url("<path_to_your_image>");
}
- TypeScript
import testImg from "<path_to_your_image>"
const image = new Image()
image.src = testImg
Fonts
- CSS
@font-face {
font-family: TestFont;
src: url("<path_to_your_font>");
}
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:
{
"htmlTemplate": "pug",
"entries": [
"./src/index.ts",
"./src/other.ts",
]
}
- file structure:
src
├── assets
│ ├── fonts
│ │ └── Font.ttf
│ └── images
│ └── img.png
├── index.pug
├── index.ts
├── other.pug
├── other.ts
└── styles.scss
- index.pug:
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 <a>
tag:
<a href="other.html">Other</a>