interpolate-loader

2.0.1 verified Sat Apr 25 auth: no javascript

interpolate-loader is a Webpack loader for interpolating require results within files, such as JSON manifest files. The current stable version is 2.0.1, which requires Webpack >=3.0.0. It replaces template placeholders like {{...}} with resolved Webpack module outputs, enabling dynamic injection of metadata, file references, or resource URLs. Key differentiators include customizable prefix/suffix delimiters and compatibility with companion loaders like prop-loader and extricate-loader.

Common errors

error Module not found: Error: Can't resolve 'interpolate-loader' ↓

cause interpolate-loader is not installed as a dev dependency.

fix

Run npm install --save-dev interpolate-loader

error Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Using Webpack 4+ with modern module rules syntax, but loader is configured incorrectly.

fix

Ensure rule uses 'use' array with loader strings or objects, e.g., { test: /\.json$/, use: 'interpolate-loader' }

Warnings

breaking v2.0.0 requires Webpack >=3.0.0, breaking compatibility with Webpack <3. ↓

fix Upgrade Webpack to version 3.0.0 or later.

breaking v1.0.0 drops support for Node <4 and requires Webpack >=2.0.0. ↓

fix Update Node.js to version 4+ and Webpack to 2+.

gotcha The loader uses default prefix {{ and suffix }}, but custom delimiters must include both prefix and suffix in query string. ↓

fix Use query format: interpolate-loader?prefix=(*&suffix=*).

Install

npm install interpolate-loader

yarn add interpolate-loader

pnpm add interpolate-loader

Imports

interpolate-loader

wrong

const interpolateLoader = require('interpolate-loader');

correct

import interpolateLoader from 'interpolate-loader';

ESM import works in Webpack config; CommonJS require is also acceptable in Node.js.

Quickstart

Shows how to use interpolate-loader in a Webpack configuration to process a JSON manifest file and interpolate placeholders.

// webpack.config.js
module.exports = {
  entry: 'extricate-loader!interpolate-loader!manifest.json',
  output: { filename: 'manifest.json' },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          { loader: 'file-loader', options: { name: '[name].[ext]' } },
          'extricate-loader',
          'html-loader'
        ]
      }
    ]
  },
  plugins: [
    new (require('inert-entry-webpack-plugin'))()
  ]
};