spaceship

Using Webpack 3 with NunjucksJS

How to use Web Pack 3 with NunjucksJS and how to generate multiple template files hope it will help you and save you a lot of time

Stefan Izdrail

Freelance developer available for work.

Using Webpack 3 with NunjucksJS

How to use Web Pack 3 with NunjucksJS and how to generate multiple template files hope it will help you and save you a lot of time

Hy All,

Today i found myself trying to use webpack 3 with NunjuckJS and i run into some problems like multiple page generation using multiple templates. after many hours of internet research i managed to create a webpack config fille that get's you there so i've decide to share with you guys


const webpack = require('webpack');

const path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

//
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    myOptions: { foo: 'bar' },
    inject: 'body',
    template: 'nunjucks-html-loader!./theme/templates/index.njk',
    filename: 'index.html',
});

const HtmlWebpackPluginConfigGroups = new HtmlWebpackPlugin({
    myOptions: { foo: 'bar' },
    inject: 'body',
    template: 'nunjucks-html-loader!./theme/templates/groups.njk',
    filename: 'groups.html',
});

module.exports = {

    entry: {
        home: './assets/js/home.js',
        groups: './assets/js/groups.js'
    },

    output: {
        filename: 'production/[name].js',
    },
    module: {

        rules: [
            {
                test: /\.js$/,
                loaders: ['babel-loader']
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        attrs: [':data-src']
                    }
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css-loader!sass-loader')
            },
            {
                test: /\.html$|njk|nunjucks/,
                use: ['html-loader',{
                    loader: 'nunjucks-html-loader',
                    options : {
                        // Other super important. This will be the base
                        // directory in which webpack is going to find
                        // the layout and any other file index.njk is calling.
                        minimize: false,
                        minifyJS:true,
                        minifyCSS:true,
                        collapseWhitespace: false,
                        searchPaths: ['./theme/templates'],
                        root: path.resolve(__dirname, 'production'),
                    }
                }]
            },
            {
                test: /\.(gif|png|jpe?g|svg|webp)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=./production/static/[hash].[ext]',
                    'image-webpack-loader'
                ]
            }

        ]
    },
    plugins: [

        new ExtractTextPlugin('production/[name].css'),
        new webpack.HotModuleReplacementPlugin(),
        HtmlWebpackPluginConfig,
        HtmlWebpackPluginConfigGroups

    ],
    devServer: {
        contentBase: [path.join(__dirname, "production"), path.join(__dirname, "assets")],
        publicPath: "/",
        compress: false,
        port: 9000,
        inline: false,

    },

};

and to not forget the package.json file


{
  "name": "network",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --progress --colors --watch",
    "prod": "webpack -p"
  },
  "keywords": [],
  "author": "lzoMedia",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "image-webpack-loader": "^3.4.2",
    "node-sass": "^4.7.2",
    "nunjucks-html-loader": "^1.1.0",
    "postcss-loader": "^2.0.9",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "uikit": "^3.0.0-beta.35",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "devDependencies": {}
}

i hope it will help you and belive me this is the only solution to do it for now because the guys from HtmlWebpackPlugin don't allow the use of [name] inside the filename option.

More stories

  • Author Name

    Sed do eiusmod tempor incididunt

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. READ MORE
  • Author Name

    Sed do eiusmod tempor incididunt

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. READ MORE
  • Author Name

    Sed do eiusmod tempor incididunt

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. READ MORE
  • Author Name

    Sed do eiusmod tempor incididunt

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. READ MORE
  • Author Name

    Sed do eiusmod tempor incididunt

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. READ MORE
  • Author Name

    Sed do eiusmod tempor incididunt

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. READ MORE
  • Author Name

    Sed do eiusmod tempor incididunt

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. READ MORE
  • Laravel Star
    I'm a certified Laravel Developer
  • Availability
    My working hours are from 9 to 5
  • Current Location
    Currently I'm located in London.
  • Happy Clients
    Over 200 clients made happy
  • Support
    Over 100 hours of support

Freelance Developer

Creator of @Lzo Media I am a 30 years old Romanian freelance developer who likes beautiful code and has an adherence to standards & open-source solutions.