html-webpack-plugin: Unable to render dynamic content from config

Description

I’ve tried to get custom data injected into our .html template using this loader without any success. We’ve been able to successfully build our assets and have them injected, however, the ability to pass in dynamic data has not worked. Looking at the examples provided in this repo, I don’t see how options.title is passed into the template.

Docs: Template Example

Code Reference: Starter kit

Error Message & Stack Trace

COPY THE ERROR MESSAGE, INCLUDING STACK TRACE HERE

Config

Copy the relevant section from webpack.config.js:

module.exports = {
  devtool: 'source-map',
  entry: {
    app: [
      'babel-polyfill',
      path.join(__dirname, 'client', 'app/app.js')
    ]
  },
  module: {
    loaders: [
       { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate-loader!babel-loader' },
       { test: /\.html$/, loader: 'raw-loader' }, // have also tried with the html-loader
       { test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader' },
       { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  },
  plugins: [
    // Injects bundles in your index.html instead of wiring all manually.
    // It also adds hash to all injected assets so we don't have problems
    // with cache purging during deployment.
    new HtmlWebpackPlugin({
      template: 'client/index.html',
      // inject: 'body',
      // hash: true,
      title: 'TEST!!!!!!!!!!!',
      options: {
        title: "TEST!!!!!!!!!!!!!*"
      },
      chunks: ['vendor', 'app']
    }),

    // Automatically move all modules defined outside of application directory to vendor bundle.
    // If you are using more complicated project structure, consider to specify common chunks manually.
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: module => /node_modules/.test(module.resource)
    })
  ]
};

Copy your template file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="NG6-Starter by @AngularClass">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <base href="/">
  </head>
  <body ng-app="app" ng-strict-di ng-cloak>


  <%= htmlWebpackPlugin.options.title %>

  <%= htmlWebpackPlugin.title %>

  <%= title %>

  <%= '\<\%\= htmlWebpackPlugin.title \%\>' %>

  <%= '\<\%\= htmlWebpackPlugin.options \%\>' %>

  </body>
</html>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 37

Most upvoted comments

Use this, only one rule is needed (contrary to what I was saying earlier…) make sure to install pug-loader rather than pug-html-loader

pug-loader: returns a function pug-html-loader: returns a string, so it’s static and no options can be pass through

{
        test: /.pug$/,
        exclude: ['/node_modules/'],
        use: [
          {
            loader: 'pug-loader',
            query: {
              pretty: true,
              data: {
                global: require('./src/content/global.json'),
                home: require('./src/content/home.json')
              }
            }
          }
        ]
      },

You will still get an error, in hero.pug, but I can’t do anything for you there, it’s an issue with your code

mastilver on Jul 21, 2017

@mastilver I’ve refactored whole project with pug-loader. Data is passed by html-webpack-plugin. Works fantastic! Thank you so much for your help. You saved my day! ❤️

giacomoalonzi on Jul 21, 2017

check this boilerplate https://github.com/giacomoalonzi/webpack-webapp/blob/v2/webpack.config.js thank you so much for you time! 🙏 but we have to solve this issue 👯 💪

giacomoalonzi on Jul 21, 2017

@giacomoalonzi @FarhadG you have the same issue: html-loader is getting in the way of html-webpack-plugin, so you need to setup a regex that match all your html files but your template

In short your template shouldn’t be matched by the html-loader

@giacomoalonzi You are using pug, so you just need to setup another loader that only match your template

I don’t know what’s your file structure, but this should make it obvious:

-       { test: /\.html$/, loader: 'raw' },
+       { test: /app.*\.html$/, loader: 'raw' },

Because my template in not inside the app folder, I can configure my loader to only match html that are inside the app folder and therefor exclude my template

mastilver on Jul 20, 2017

I know exactly what you mean, @giacomoalonzi. I’ve tried everything under the sun 😃

FarhadG on Jul 20, 2017

Yes, there seems to be an issue…

First you can try using { test: /app.*\.html$/, loader: 'raw' }, but it will bring another issue, I will look a bit further on that

mastilver on Jul 20, 2017