Registry / web-framework / underscore-template-loader

underscore-template-loader

library1.2.0jsnpmunverified

Webpack loader that compiles Underscore.js or Lodash templates. Current stable version 1.2.0 supports Webpack 5. Low maintenance, no recent releases since 2021. Supports macros, template settings (interpolate/evaluate/escape), imports, and prepending filename comments for debugging. Works with file-loader and url-loader for image references. Key differentiator: enables using _.template and lodash templates as Webpack modules with additional macro features like @include and @require.

web-framework

npm install underscore-template-loader

github ↗package ↗

INSTALL

IMPORT

SIG · UNDERSCORE-TEMPLAT

underscore-template-loader

web-frameworkjavascriptv1.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

underscore

✓ import _ from 'underscore'

✗ const _ = require('underscore');

CommonJS require also works but is outdated for modern ESM projects.

lodash

✓ import _ from 'lodash'

✗ const _ = require('lodash');

lodash can be used as engine; similar to underscore.

compiled template

✓ import tmpl from './template.html'

✗ const tmpl = require('./template.html');

Loader returns a function; use default import for ESM.

Shows basic webpack rule, template usage, and import of compiled template as a function.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.html$/, loader: 'underscore-template-loader' }, ], }, }; // template.html <p>Hello <%= name %></p> // app.js import tmpl from './template.html'; const result = tmpl({ name: 'world' }); console.log(result); // <p>Hello world</p>

Debug

Known issues

gotchaWhen using lodash, template imports require setting _.templateSettings.imports before requiring the template.

fix

Set _.templateSettings.imports before any require/import calls to the loader.

affects: >=0.7.0

breakingWebpack 4 changed loader configuration from `loaders` (array of objects) to `rules` (array with `use` or `loader`).

fix

Use `module.rules` instead of `module.loaders`. Example is for old syntax.

affects: 1.0

deprecatedThe `include` tag is deprecated in favor of `@include` and `@require` macros.

fix

Use `@include` or `@require` macros instead.

affects: >=0.5.0

gotchaImages in templates require file-loader or url-loader to be installed and configured separately.

fix

Add appropriate loader rule for image file types.

affects: >=0.0.0

breakingWebpack 5 may require adjustments to loader query options; version 1.2 adds support.

fix

Ensure you use underscore-template-loader 1.2.0 or later for Webpack 5 compatibility.

affects: 1.2

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'underscore-template-loader'

Loader not installed or not listed in webpack config correctly.

fix

Run `npm install underscore-template-loader --save-dev` and ensure `loader: 'underscore-template-loader'` in webpack config.

You may need an appropriate loader to handle this file type.

Webpack doesn't have rule for .html files to use underscore-template-loader.

fix

Add `{ test: /\.html$/, loader: 'underscore-template-loader' }` to webpack `module.rules`.

Cannot find module 'underscore'

underscore package not installed, but required by compiled template at runtime.

fix

Install underscore: `npm install underscore` (or lodash if using lodash engine).

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

underscoreoptionalTemplate compilation requires underscore or lodash at runtime

lodashoptionalAlternative to underscore for template engine

file-loaderoptionalOptional peer dependency for image loading in templates

url-loaderoptionalAlternate image loader (peer dependency)

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/emaphp/underscore-template-loader ↗

packagehttps://www.npmjs.com/package/underscore-template-loader ↗