Combine with other loaders about twig-loader

[nickkessler]

+1

Would love to use this twig plugin but I need to pipe with the html loader so I can integrate with the url loader, for images.

Any help greatly appreciated.

[webberig]

Hi!

Please take a look at this section of the webpack documentation:
http://webpack.github.io/docs/how-to-write-a-loader.html#do-only-a-single-task

Firstly, it will explain why we won't implement what you're asking in this loader, as it would violate the single task rule.

But coincidently, it will also gives an example for your use case. The apply-loader will probably do what you want.

[auburus]

Oh, my bad, so sorry.

It does much more sense using concrete loaders, and the apply loader saved the day, so thanks for your suggestion.

I'll leave this here in case anyone else is struggling with the same (or, if you prefer, I can make a pull request to put it in the docs, up to you).

// File: twigVariables.js
module.exports = {
  name: 'Mufasa'
}

// File webpack.config.js

var twigVariables = require('./twigVariables.js');

module.exports = {
  // ...

  module: {
    loaders: {
      {
        test: /\.twig$/,
        loader: "apply?{ obj: " + JSON.stringify(twigVariables) + "}!twig"
      }
    }
  }
}

Note:
This doesn't allow you to pipe it directly to something like html-loader, because it's still js. Although, it complains if you try to use an other loader like val-loader, so I've run out of ideas. Anyway, I hope that something of this was useful.

[webberig]

This loader's purpose is to COMPILE twig templates, not actually RENDER them. If you are trying to render HTML during build-time, this loader is not the tool you need.

Since I don't have use cases for this in my own projects, I can't provide a working example, but - in theory - you should create a JS file that imports TwigJS directly (not the loader) and renders a given template. After that, you can use Apply-loader to execute the rendering and add the result to your webpack chunks.