webpack-nunjucks-boilerplate

KO | EN

gitlite — search

#llm #deep-learning #linux #macos #nodejs #windows #cli #kubernetes #awesome-list #vue #pytorch #ios #openai #open-source

webpack-nunjucks-boilerplate

(★ 10)

Webpack + Nunjucks boilerplate for static websites that has all the necessary modern tools and optimizations built-in.

webpack-nunjucks-boilerplate 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 📦 Webpack + Nunjucks Boilerplate

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Webpack + Nunjucks boilerplate for static websites that has all the necessary modern tools and optimizations built-in.

![Webpack Boilerplate](https://habrastorage.org/webt/iy/mr/2a/iymr2asueudrawkzepthfai6qvy.jpeg)

## ⚗️ Features

- [Webpack](https://webpack.js.org)
- [Nunjucks](https://mozilla.github.io/nunjucks) (supports multiple pages)
- [Babel](https://babeljs.io)
- [TypeScript](https://typescriptlang.org) (disabled by default)
- [ESLint](https://eslint.org)
- [Sass](https://sass-lang.com)
- [PostCSS](https://postcss.org)
- [StyleLint](https://stylelint.io)
- [SVG Sprite](https://github.com/JetBrains/svg-sprite-loader)

## 🚀 Usage

```bash
# Clone repository
git clone https://github.com/alsolovyev/webpack-boilerplate.git project-name

# Navigate to the project directory
cd project-name

# Install dependencies
yarn          # npm install

# Run webpack-dev-server and let the magic happen
yarn start    # npm start

# Build the project from sources
yarn build    # npm run-script build

# Deploy the dist folder to GitHub pages
yarn deploy
```

## 💻 Available Scripts

- `serve` - run the `webpack-dev-server`
- `build` - build the project
- `deploy` - deploy the `dist` folder to GitHub Pages

## 📘 Documentation

### TypeScript Support

By default, TypeScript support is disabled. To enable it, set the `TS_SUPPORT` environment variable to `true` in `package.json`.

```bash
... TS_SUPPORT=true ...
```

### Multiple pages

Just create nunjucks files in `src` folder

```
┣━ js
┣━ njk
┣━ sass
┣━ home.njk
┣━ page1.njk
┣━ page2.njk
```

### SCSS files

Just import SCSS files with extension:

```sass
// app.sass
// ...
@import common
@import another.scss
// ...
```

### SVG sprite

1. Import SVG icon

```javascript
// src/js/dev/icons.js
import '@/icons/github.svg'
```

2. Use this icon in your template

```javascript
// *.njk z
{{ icon('github', 'custom-class-name') }}
```

### Environment variables

#### `NODE_ENV`

> Type: `'development' | 'production' | none` 
> Default: `'development'`

Indicates the current mode.

#### `OUTPUT_DIR`

> Type: `string` 
> Default: `'dist'`

Indicates the directory where the production build files will be generated.

#### `PUBLIC_PATH`

> Type: `string` 
> Default: `'/'`

Indicates the base URL your project bundle will be deployed at.

#### `SOURCE_DIR`

> Type: `string` 
> Default: `'src'`

Indicates the directory where the source files are located.

#### `TS_SUPPORT`

> Type: `'true' | 'false' | none` 
> Default: `none`

Indicates whether TypeScript support should be enabled. 
_`none` is equal to `false`_

## 🔨 Task List

- [x] ~~Have a cup of tea~~
- [x] ~~Clear the terminal screen~~ ([c73fd0](https://github.com/alsolovyev/webpack-boilerplate/commit/c73fd0d4cbf53da72866ac9a326f27f9d62fbf79))
- [x] ~~Enable ESLint for TypeScript files~~ ([c27e7b](https://github.com/alsolovyev/webpack-nunjucks-boilerplate/commit/c27e7be368fedff85817efc422e5ffe7233eda39))
- [x] ~~Run loaders in a worker pools~~ ([daee75](https://github.com/alsolovyev/webpack-nunjucks-boilerplate/commit/daee7574bc65152b06cdeb579e64a9d4fe75c0e1))
- [x] ~~Run TypeScript type checker on a separate process~~ ([534c0b](https://github.com/alsolovyev/webpack-nunjucks-boilerplate/commit/534c0bd62b5727504e6036999a23609c4e03a186))
- [x] ~~Disable TypeScript support by default~~ ([e7c659](https://github.com/alsolovyev/webpack-nunjucks-boilerplate/commit/e7c65978384f4becb5836d5d99892d5f377fc9b2))
- [x] ~~Replace simple-nunjucks-loader with custom loader~~ ([b05607](https://github.com/alsolovyev/webpack-nunjucks-boilerplate/commit/b056076a4a1b0cdea73ccdf6ae34fc1c0f3a98e6))
- [x] ~~Add nunjucks functions and filters~~ ([90e877](https://github.com/alsolovyev/webpack-nunjucks-boilerplate/commit/90e87775719b0a47d71d0f135528c0465623134e))
- [x] ~~Fix ERR_OSSL_EVP_UNSUPPORTED error~~ ([8fd0c5](https://github.com/alsolovyev/webpack-nunjucks-boilerplate/commit/8fd0c58e7acb6431bd58d68f525e87a8edf56da4))
- [x] ~~Fix StylelinkPlugin #19~~ ([#20](https://github.com/alsolovyev/webpack-nunjucks-boilerplate/pull/20))
- [ ] Optimize [njk-loader](./config/modules/njk-loader/index.js) code
- [ ] Enable caching
- [ ] Add native OS notifications

## 📓 Dependencies

### Webpack:

- [webpack](https://github.com/webpack/webpack)
- [webpack-cli](https://github.com/webpack/webpack-cli)
- [webpack-dev-server](https://github.com/webpack/webpack-dev-server)

### Loaders:

- Nunjucks

- [html-loader](https://github.com/webpack-contrib/html-loader)
  - [njk-loader(internal)](./config/modules/njk-loader/index.js)
    - [nunjucks](https://github.com/mozilla/nunjucks)

- JavaScript

- [babel-loader](https://github.com/babel/babel-loader)
    - [@babel/core](https://github.com/babel/babel)
    - [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)

- TypeScript

- [babel-loader](https://github.com/babel/babel-loader)
    - [@babel/core](https://github.com/babel/babel)
    - [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)
  - [ts-loader](https://github.com/TypeStrong/ts-loader)
    - [typescript](https://github.com/microsoft/TypeScript)

- CSS

- [style-loader](https://github.com/webpack-contrib/style-loader)
  - [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
  - [css-loader](https://github.com/webpack-contrib/css-loader)
  - [postcss-loader](https://github.com/webpack-contrib/postcss-loader)
    - [postcss](https://github.com/postcss/postcss)
    - [autoprefixer](https://github.com/postcss/autoprefixer)
  - [sass-loader](https://github.com/webpack-contrib/sass-loader)
    - [sass](https://github.com/sass/sass)

- Assets

- [asset modules](https://webpack.js.org/guides/asset-modules)

- SVG

- [svg-sprite-loader](https://github.com/JetBrains/svg-sprite-loader)
  - [svgo-loader](https://github.com/svg/svgo-loader)

- Optimization
  - [thread-loader](https://github.com/webpack-contrib/thread-loader)

### Plugins:

- HTML

- [HtmlWebpackPlugin](https://github.com/jantimon/html-webpack-plugin)

- TypeScript

- [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)

- CSS

- [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin)

- Eslint

- [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin)
    - [ESLint](https://github.com/eslint/eslint)
    - [@babel/core](https://github.com/babel/babel)
    - [@babel/eslint-parser](https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser)
    - [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser)
    - [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin)

- Stylelint

- [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin)
    - [postcss-sass](https://github.com/AleshaOleg/postcss-sass)
    - [postcss-scss](https://github.com/postcss/postcss-scss)
    - [StyleLint](https://github.com/stylelint/stylelint)

- Terminal
  - [TerminalClearPlugin(internal)](./config/modules/terminal-clear-plugin/index.js)

### Other:

- Git

- [lint-staged](https://github.com/lint-staged/lint-staged)

- Code
  - [prettier](https://prettier.io/)

## 💩 Authors

- **[Aleksey Solovyev](https://github.com/alsolovyev)** - [solovyev.a@icloud.com](mailto:solovyev.a@icloud.com)

## 📖 License

This project is licensed under the [MIT](./LICENSE) License

webpack-nunjucks-boilerplate

webpack-nunjucks-boilerplate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

webpack-nunjucks-boilerplate

webpack-nunjucks-boilerplate 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README