📦 Webpack + Nunjucks Boilerplate

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

⚗️ Features

• Webpack
• Nunjucks (supports multiple pages)
• Babel
• TypeScript (disabled by default)
• ESLint
• Sass
• PostCSS
• StyleLint
• SVG Sprite

🚀 Usage

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

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

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

SVG sprite

1. Import SVG icon

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

2. Use this icon in your template

// *.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

• Have a cup of tea
• Clear the terminal screen (c73fd0)
• Enable ESLint for TypeScript files (c27e7b)
• Run loaders in a worker pools (daee75)
• Run TypeScript type checker on a separate process (534c0b)
• Disable TypeScript support by default (e7c659)
• Replace simple-nunjucks-loader with custom loader (b05607)
• Add nunjucks functions and filters (90e877)
• Fix ERR_OSSL_EVP_UNSUPPORTED error (8fd0c5)
• Fix StylelinkPlugin #19 (#20)
• Optimize njk-loader code
• Enable caching
• Add native OS notifications

📓 Dependencies

Webpack:

• webpack
• webpack-cli
• webpack-dev-server

Loaders:

• Nunjucks

  • html-loader
  • njk-loader(internal)
    • nunjucks

• JavaScript

  • babel-loader
    • @babel/core
    • @babel/preset-env

• TypeScript

  • babel-loader
    • @babel/core
    • @babel/preset-env
  • ts-loader
    • typescript

• CSS

  • style-loader
  • mini-css-extract-plugin
  • css-loader
  • postcss-loader
    • postcss
    • autoprefixer
  • sass-loader
    • sass

• Assets

  • asset modules

• SVG

  • svg-sprite-loader
  • svgo-loader

• Optimization

  • thread-loader

Plugins:

• HTML

  • HtmlWebpackPlugin

• TypeScript

  • fork-ts-checker-webpack-plugin

• CSS

  • MiniCssExtractPlugin

• Eslint

  • eslint-webpack-plugin
    • ESLint
    • @babel/core
    • @babel/eslint-parser
    • @typescript-eslint/parser
    • @typescript-eslint/eslint-plugin

• Stylelint

  • stylelint-webpack-plugin
    • postcss-sass
    • postcss-scss
    • StyleLint

• Terminal

  • TerminalClearPlugin(internal)

Other:

• Git

  • lint-staged

• Code

  • prettier

💩 Authors

• Aleksey Solovyev - [email protected]

📖 License

This project is licensed under the MIT License