Html-webpack-plugin: Can I pass my own variables to my own ejs template

Created on 2 Apr 2017  路  6Comments  路  Source: jantimon/html-webpack-plugin

I want to interpolate a version variable in my index.ejs and I still haven't found the way.

Everything I try, I end up getting this error message:

Html Webpack Plugin:
  ReferenceError: version is not defined

I haven't been able to find in the docs if this is doable with html-webpack-plugin and, if so, how to do it.

Most helpful comment

How does index.ejs have access to the htmlWebpackPlugin object? For some reason, I still haven't seen anything explaining from where this entity comes.

All 6 comments

@carlesandres You should be able to access to your variables through htmlWebpackPlugin.options.[yourVariableName]

@mahcr I have tried this:

        new HtmlWebpackPlugin({
            options: {
                version: '1.0'
            },
            template: './index.ejs',
            // This is essential to place the index.html in the right place
            // after the build
            filename: '../index.html'
        })
    ]
});

but still got the same error . I am using webpack v2.2.1 and html-webpack-plugin v2.28.0 .

Could you post an example of the correct syntax to use?

@mahcr, I got it now. Thanks for the hint:

webpack.config.js:

new HtmlWebpackPlugin({
    version: '1.0',
    template: './index.ejs',
    filename: '../index.html'
})
````

index.ejs

```html
<!-- Version: <%= htmlWebpackPlugin.options.version %> -->

I must say that this was really not obvious to me. The only thing putting me off of creating a PR for documenting this is that I see that many PRs have hanging around for quite some time in this repo.

If there is any interest that I add it, I'll be very happy to do so.

Hey @carlesandres, maybe I did not explain myself well but the confusion came because you have a a property call options in the first object

new HtmlWebpackPlugin({
            options: {
                version: '1.0'
            },
            template: './index.ejs',
            // This is essential to place the index.html in the right place
            // after the build
            filename: '../index.html'
        })

So the right way to access to it, would be
<%= htmlWebpackPlugin.options.options.version %>

How does index.ejs have access to the htmlWebpackPlugin object? For some reason, I still haven't seen anything explaining from where this entity comes.

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.

Was this page helpful?
0 / 5 - 0 ratings