How can I provide parameters for webpack html-loader interpolation?

Question

In the html-loader documentation there is this example

require(\"html?interpolate=require!./file.ftl\");

<#list list as list>
    

        

Answer 1

Using html-loader with interpolate, you can import variables from your webpack.config.js by using DefinePlugin.

// webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          interpolate: true
        }
      }
    ],
  },
  plugins: [
    new DefinePlugin({
      VARNAME: JSON.stringify("here's a value!")
    })
  ]
};

---

// index.html

${ VARNAME }

html-loader's interpolations accept any JavaScript expression, but the scope that those expressions are evaluated in aren't populated with any of your configuration options by default. DefinePlugin adds values to that global scope. EnvironmentPlugin could also be used to populate values in process.env.