Html-webpack-plugin: Webpack 2: how to pass additional variables for use in templates

[dsebastien]

Hello,

I'm currently migrating to Webpack 2 and encountering issues with html-webpack-plugin.
Do you know if/how I can define/pass custom variables for use within my template?

Here's an overview of my (currently broken) configuration:

Plugin:

new HtmlWebpackPlugin({
            template: helpers.root("src/index.html"),
}),

In my index.html file, I could inject configuration this way:

<meta name="description" content="<%= webpackConfig.starkAppMetadata.description %>">

With Webpack 1 I could have this working because starkAppMetadata was defined in my webpack configuration, but with Webpack 2 they don't allow this anymore and I have to define the variables within the LoaderOptionsPlugin instead:

const commonConfig = require("./webpack.common.js"); // common configuration between environments
const commonData = require("./webpack.common-data.js"); // common configuration between environments
...
        new LoaderOptionsPlugin({
            options: {
                                 ...
                starkAppMetadata: commonData.starkAppMetadata,
                starkAppConfig: commonData.starkAppConfig,
                                ...
            },

Do you have an idea of how I could access those?
I believe that you should be able to still retrieve/expose those values within the "templateParams" object that you prepare in index.js before calling the templateFunction.

[bondz]

Try

new LoaderOptionsPlugin({
    options: {
        htmlWebpackPlugin: {
            starkAppMetadata: commonData.starkAppMetadata,
        }
    }
}

[cescoferraro]

@dsebastien use the env object.
A full initialization of this plugin I found on github

    new HtmlWebpackPlugin({
      filename: consts.INDEX_HTML,
      title: 'RCN.io',
      template: path.resolve(consts.SRC_DIR, 'client/index.html.ejs'), // Load a custom template
      css: ['app.css'],
      inject: false, // we use custom template to inject scripts,
      hash: true,
      env: {
        Prod: true,
        Dev: false
      },
      minify: { // Minifying it while it is parsed
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
    })

[dsebastien]

@bondz I tried that approach but unfortunately it didn't work

It works by defining the plugin this way:

        new HtmlWebpackPlugin({
            template: helpers.root("src/index.html"),
                        ...
            metadata: METADATA,
            starkAppMetadata: commonData.starkAppMetadata,
            starkAppConfig: commonData.starkAppConfig,
        }),

I would've liked to be able to use @bondz solution as that way I could've avoided some configuration duplication. Any idea why that doesn't work? Do loaders need to be modified to be able to retrieve options passed via the LoaderOptionsPlugin ?

[jantimon]

@dsebastien I am not sure if this could work as the HtmlWebpackPlugin is not a loader but a plugin

[dsebastien]

@jantimon haha that's a good point :p

I guess you can consider this issue resolved, it just works now and I can work around the issue using other means too.

[dsebastien]

Thanks!

[neginbasiri]

Hi all, I need to send some section of data to a partial of ejs.

<%
var data = htmlWebpackPlugin.options.data;
var carouselElement = data.carouselElement;
if (data) { %>

<%- include ../../components/avalon/header/header.ejs %>

<%- include ../../components/hero.image/hero.image.ejs %>
<%- include('../../components/content.carousel/content.carousel.ejs', {carouselElement}); %>

<%}%>

above code doesn't work. Wondering if anyone know how to pass data using include?

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.