html-loader replace

[spoetnik]

html-loader doesn't seem to replace template variables.
Things like <title><%= htmlWebpackPlugin.options.title %></title> won't work.

Any suggestions on how to make this work?

[jopfre]

I am having the same issue. I want to use html partials to allow code reuse. Did you have any luck with this?

[jopfre]

I made some progress using this answer as a guide https://stackoverflow.com/a/47827663/2894708.

Essentially:

Rename index.html to index.html.ejs

update common.webpack.config where it references index.html to use index.html.ejs

  new HtmlWebpackPlugin({
      title: 'home',
      filename: 'index.html',
      template: './src/index.html.ejs',
      inject: 'head',
    }),

remove import './index.html'; from index.js

This makes partials work using this syntax <%=require('./partials/logo.html')%>. I assume your options.titlereference will also work.

Basically when the suffix is .html then html-loader will process the file but when it is .ejs htmlWebpackPlugin will.

However the issue is now that image paths don't resolve. I think because html-loader is handling that. My solution is just to make sure references to images are within a partial as this file can end in .html.

Hope this helps someone. If anyone knows how to resolve image paths in the index.html.ejs template please let me know.