lodash-template-webpack-loader

1.0.2 verified Sat Apr 25 auth: no javascript maintenance

Webpack loader that compiles Lodash/Underscore templates into functions. Version 1.0.2, stable, last updated 2016. Supports interpolation (<%= %>), escape (<%- %>), evaluation (<% %>), template settings (imports, variable, custom delimiters), and optional global or engine-based Lodash. Notable for its simplicity and customizability without bundling full Lodash unless desired. No known active development or maintenance.

Common errors

error Module build failed: Error: Cannot find module 'lodash' ↓

cause Lodash not installed or not in node_modules; loader requires lodash unless globalLodash is set.

fix

npm install lodash --save-dev OR set globalLodash: true in loader options.

error DeprecationWarning: loaderUtils.parseQuery is deprecated ↓

cause Using webpack version that deprecated parseQuery; the loader uses old API.

fix

Use webpack 1, or patch loader source; consider alternative.

error Error: Cannot find module './path/to/template.tpl' ↓

cause Webpack rule not matching .tpl files or loader not configured correctly.

fix

Ensure test regex matches file extension and loader name is correct.

Warnings

breaking The loader works only with webpack 1.x; not compatible with webpack 2+ by default. ↓

fix Use webpack 1 or switch to a maintained loader like 'html-loader' or 'raw-loader'.

gotcha Setting _.templateSettings.imports AFTER require-ing a template will NOT work. ↓

fix Set imports via 'importsModule' or 'imports' config option instead.

deprecated The 'lodashTemplateLoader' config object is a custom non-standard webpack key. ↓

fix Use 'options' property within loader rule in webpack 2+, not top-level lodashTemplateLoader.

Install

npm install lodash-template-webpack-loader

yarn add lodash-template-webpack-loader

pnpm add lodash-template-webpack-loader

Imports

lodash-template-webpack
wrong
```
import lodashTemplateWebpack from 'lodash-template-webpack'
```
correct
```
module.exports = { module: { loaders: [{ test: /\.tpl$/, loader: 'lodash-template-webpack' }] } }
```
This is a webpack loader, not a JS module. It is referenced by the string 'lodash-template-webpack' in webpack config loaders array.

Quickstart

Shows webpack config, template imports module, and usage in a JS file with Lodash template syntax.

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },
  module: {
    loaders: [
      { test: /\.tpl$/, loader: 'lodash-template-webpack' }
    ]
  },
  lodashTemplateLoader: {
    engine: 'lodash',
    importsModule: path.join(__dirname, 'template-imports')
  }
};

// template-imports.js
module.exports = {
  scream: function(str) { return (str || '').toUpperCase(); }
};

// src/index.js
var template = require('./template.tpl');
document.body.innerHTML = template({ title: 'Hello' });

// template.tpl
<h1><%= title %></h1>
<p><%- scream('hello') %></p>