Skip to content

iyonaga/nunjucks-render-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

nunjucks-render-loader

Nunjucks loader module for webpack

Installation

npm install --save nunjucks-render-loader

Usage

webpack.config.js

module: {
  rules: [
    {
      test: /\.njk$/,
      use: {
        loader: 'nunjucks-render-loader',
        options: {
          path: path.resolve(__dirname, 'src/views')
        }
      }
    }
  ]
},

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './index.njk'
  })
]

Tips

  • Passing variables using HTML Webpack Plugin

webpack.config.js

module: {
  rules: [
    {
      test: /\.njk$/,
      use: {
        loader: 'nunjucks-render-loader',
        options: {
          path: path.resolve(__dirname, 'src/views')
        }
      }
    }
  ]
},

plugins: [
  new HtmlWebpackPlugin({
    foo: 'bar',
    filename: 'index.html',
    template: './index.njk'
  })
]

index.njk

<!DOCTYPE html>
<html>
  {% include "partials/_head.njk" %}
  <body>
    <%= htmlWebpackPlugin.options.foo %>
  </body>
</html>
  • Require images

<!DOCTYPE html>
<html>
  {% include "partials/_head.njk" %}
  <body>
    <img src="<%= require('./img/image.jpg') %>">
  </body>
</html>

Options

  • path - Relative path to templates. (default: process.cwd())

  • context - Data to pass to the template. (default: {})

  • envOptions - These are options provided for nunjucks Environment. More info here. (default: {})