webpack/jade-loader — pull request #2 by justmoon (2013-10-27 21:20:12+00:00)
Title: Add ability to enable webpack-powered "include"

The Jade template language has an `include` statement which normally statically merges a sub-template into the current template. (It actually does this at parse time, i.e. very early in the compilation process.)

When I tried to create a webpack pre-filter for Jade templates, I ran into a number of issues. This pull request represents my solutions.

1. Includes would fail entirely, because `jade-loader` would not strip the filename correctly if there were other filters. Not sure if my fix is correct, please review. See 0ebc13ccdd56af7c65cbb847c0e6e123339e2e44.

2. Since the include is applied without webpack being aware of it at all, the filters etc. don't get applied to the subtemplates. After trying a few approaches towards solving this, I found one that seems to work very well and is extremely powerful: Translating `include file.jade` tags into `!= require('file.jade')(locals)` lines.

What this does is it delegates the actual job of including the sub-template to webpack's `require`. This means that pre-filters etc. all work perfectly and sub-templates that are included in multiple places are only shipped once in the compiled code.

However, this does cause a few regressions, so I've made it optional, disabled by default:

- Will break if you have a template variable called `locals`.
- Will break if your templates contain JS code that relies on the static compilation behavior somehow.
- Might break with future versions of Jade, since we're monkey-patching the parser. (Although I'm doing it as cleanly as possible.)