Support Webpack 2

[romanmarkelov]

Hi! In webpack2 I get error precompiledContext is not defined Show example using the loader

[jeremyzahner]

@webmarkelov Hi there. I did not yet test the loader in Webpack 2. I might do that in the next few days since we are thinking about migrating our stacks anyway.

[alexalv]

Hi! First of all, my case certainly does not address the problem mentioned in the first comment, but maybe it would be helpful. I am currently using nunjucks-html-loader for one of the projects, although the usage is not extensive (I am using it for includes mostly). I've upgraded webpack to 2.2.1 and all I had to change in regards to nunjucks-html-loader was add -loader postfix to file and nunjucks-html. Basically made this

{
    test: /\.html$/,
    loader: 'file?name=[path][name].html!nunjucks-html?' +
                JSON.stringify({
                    'searchPaths': [
                        'path/to/includes/'
                    ]
                })
}

into this

{
    test: /\.html$/,
    loader: 'file-loader?name=[path][name].html!nunjucks-html-loader?' +
                JSON.stringify({
                    'searchPaths': [
                        'path/to/includes/'
                    ]
                })
}

and all worked perfectly.

[jeremyzahner]

@alexalv Thanks! I'll update the documentation with this asap.

[romanmarkelov]

@alexalv I tried but not work :( Can i see example?

[jeremyzahner]

@webmarkelov Could you post your webpack2 config?

[romanmarkelov]

My mistake! work perfectly with webpack version 2.2.1

example:

// webpack.config.js
const path = require('path');
const webpack = require("webpack");

module.exports = {
    entry: './assets/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    module: {
      rules: [{
          test: /\.njk$/,
          loader: 'file-loader?name=[path][name].html!nunjucks-html-loader?' +
          JSON.stringify({
              'searchPaths': [
                  path.resolve(__dirname, 'assets/views')
              ]
          })
      }]
    }
};

// app.js
require.context("./views/pages/", true, /^\.\/.*\.njk$/);

[romanmarkelov]

Improve:

// webpack.config.js
const path = require('path');
const webpack = require("webpack");

module.exports = {
    entry: './assets/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [{
            test: /\.njk$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].html'
                    }
                },
                {
                    loader: 'nunjucks-html-loader',
                    options: {
                        searchPaths: path.resolve(__dirname, 'assets/views')
                    }
                }
            ]
        }]
    },
};

[jeremyzahner]

@webmarkelov Thanks!