Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ibesty/nunjucks-webpack-loader
Nunjucks loader for webpack, support include, extends and Customizing Syntax.
https://github.com/ibesty/nunjucks-webpack-loader
nunjucks-loader webpack
Last synced: 3 months ago
JSON representation
Nunjucks loader for webpack, support include, extends and Customizing Syntax.
- Host: GitHub
- URL: https://github.com/ibesty/nunjucks-webpack-loader
- Owner: ibesty
- License: mit
- Created: 2018-10-19T06:46:08.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T16:41:00.000Z (about 2 years ago)
- Last Synced: 2024-10-01T08:06:02.284Z (3 months ago)
- Topics: nunjucks-loader, webpack
- Language: JavaScript
- Homepage:
- Size: 253 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nunjucks-webpack-loader
[![NPM version][npm-image]][npm-url]Nunjucks loader for webpack, support `include`, `extends` and `Customizing Syntax`.
[Features](#features) | [Installation](#installation) | [Usage](#usage) | [Examples](#examples) | [Command-line options](#options) | [Configuration](#configuration)
## Features
- **Load nunjucks template file in webpack:** You can use it with html-webpack-loader.
- **Support `include` and `extends`:** Use `include` and `extends` with folder alias in file.
- **Customizing Syntax:** If you want different tokens than {{ and the rest for variables, blocks, and comments, you can specify different tokens as the tags option.
## Installation```bash
$ npm i nunjucks-webpack-loader
```## Usage
In your webpack.config.js and add to rules block:
```js
{
test: /\.njk|nunjucks/,
use: ['html-withimg-loader', { // use html-loader or html-withimg-loader to handle inline resource
loader: 'nunjucks-webpack-loader', // add nunjucks-webpack-loader
options : {
alias: { // add alias and you can use it in your template
pages : path.resolve(__dirname, '../src/pages'),
components: path.resolve(__dirname, '../src/components'),
layouts: path.resolve(__dirname, '../src/layouts')
},
tags: { // if you want to use different tokens
blockStart: '@{%',
blockEnd: '%}',
variableStart: '@{{',
variableEnd: '}}',
commentStart: '{#',
commentEnd: '#}'
}
}
}]
},
```## In template file
```twig
{% include '~pages/sometemplate.njk' %} // ~pages is alias to pages folder
```## Authors
[Bestie](https://github.com/ibesty)
## License
[MIT](https://tldrlegal.com/license/mit-license)
[npm-image]: https://img.shields.io/npm/v//nunjucks-webpack-loader.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/nunjucks-webpack-loader