tpl-loader

0.2.1 verified Sat Apr 25 auth: no javascript deprecated

A webpack loader that compiles Underscore/Lodash templates using `_.template` to return a reusable template function. Version 0.2.1 is the latest stable release. It has no active maintenance and is largely superseded by modern webpack and built-in template handling. Key differentiator: simple replacement for the deprecated `underscore-loader`.

Common errors

error Module not found: Error: Cannot resolve module 'tpl-loader' ↓

cause tpl-loader is not installed or not in node_modules.

fix

Run npm install tpl-loader --save-dev.

error TypeError: _.template is not a function ↓

cause lodash is not installed or an older version without _.template support.

fix

Install/update lodash: npm install lodash.

Warnings

deprecated tpl-loader is no longer actively maintained and may not work with webpack 2+ without additional configuration. ↓

fix Consider using raw-loader with _.template manually, or switch to a modern template loader like html-loader.

breaking Requires lodash as a peer dependency; versions of lodash <4 may have breaking API changes. ↓

fix Ensure lodash is installed and compatible (v4+ recommended).

Install

npm install tpl-loader

yarn add tpl-loader

pnpm add tpl-loader

Imports

tpl
wrong
```
import template from 'tpl-loader!./file.html'
```
correct
```
import template from 'tpl!./file.html'
```
The loader is used via webpack inline syntax. `tpl-loader` can also be used but `tpl!` is the common shorthand.

tplSettings

wrong

// Not a direct import; configurations are set via global webpack config, not imported

correct

// webpack.config.js
export const tplSettings = { interpolate: /\{\{\{(.+?)\}\}\}/g }

Configuration is passed through webpack's top-level `tplSettings` property, not imported.

Quickstart

Shows how to configure webpack to load .html files as Lodash templates and use the compiled function.

// webpack.config.js
{
  module: {
    loaders: [
      { test: /\.html$/, loader: 'tpl-loader' }
    ]
  },
  tplSettings: {
    interpolate: /\{\{\{(.+?)\}\}\}/g
  }
}

// In your module:
import template from './template.html';
const data = { name: 'World' };
const result = template(data); // 'Hello {{World}}'