egoist/interpolate-html-plugin

Webpack plugin for interpolating custom variables into index.html

interpolate-html-plugin

Extracted from create-react-app

Install

This plugin is supposed to work with html-webpack-plugin

yarn add interpolate-html-plugin --dev

Usage

module.exports = {
  plugins: [
    new InterpolateHtmlPlugin({
      'NODE_ENV': 'development'
    })
  ]
}

Then you can use %NODE_ENV% in your template html file, and you can use it with html-webpack-plugin's default template syntax (lodash.template):

<% if ('%NODE_ENV%' === 'development') { %>
do something
<% } %>

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

interpolate-html-plugin © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @_egoistlily

interpolate-html-plugin's Issues

URIError: Failed to decode param '/%PUBLIC_URL%/favicon-32x32.png'

Hi, I updated webpack to v4, and now having this error:

URIError: Failed to decode param '/%PUBLIC_URL%/favicon-32x32.png'

In my index html I have:

<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">

I've seen that now the order matters and declared the plugin after HtmlWebpackPlugin

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml
    }),
    new InterpolateHtmlPlugin({
      PUBLIC_URL: ''
    }),
...

What else am I missing?

is it dead? what about webpack 4?

      compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(

TypeError: Cannot read property 'tap' of undefined
    at compiler.hooks.compilation.tap.compilation (/Users/mxtnr/rocket/felix-front/node_modules/interpolate-html-plugin/index.js:35:63)

Missing dependency: html-webpack-plugin

This plugin is supposed to work with html-webpack-plugin

If the package really needs html-webpack-plugin because it crashes if it's not installed I think it should be a dependency 🤔

Docs are misleading

I didn't think the plugin was working since it says "then you can use %NODE_ENV%" but really the delimiters are !! by default, not %. Almost gave up but looked at the docs one more time and saw the piece at the bottom about the defaults and it clicked.

webpack 4 support

hi

just wanted to ask, if you have plans to upgrade the api to support webpack 4 in the near future 😄 thanks for this great plugin!

Unable to access VARIABLE inside index.html file

I am not able to access my variable provided in the plugin like this

new InterpolateHtmlPlugin({
            MYVAR: 'myvariable',
}),

Here I am accessing variable like this
I want inside script like this

<script type="text/javascript">
if(%MYVAR%) {
do something
}
</script>

software version
windows 10
browser chrome 76.0.3809.132
webpack 4
react 16+

Cannot read property 'tap' of undefined

Getting this with 3.0.0 on Webpack 4.6.0.

compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(
                                                              ^

TypeError: Cannot read property 'tap' of undefined

Called just with example opts

new InterpolateHtmlPlugin({
      NODE_ENV: 'production'
   }),

    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: false
    })

Support for nested objects

Can I submit a PR to allow for an object of objects to be passed to the interpolate plugin?

This would allow me to do

const config = {
'foo': 'bar',
'bar': {
 'foofoo': 'barbar'
 }
}

And then in my .html file

    <link href="//%bar.foofoo%/assets/css.css" rel="stylesheet" type="text/css"></link>

TypeError: Cannot read property 'tap' of undefined when used with html-webpack-plugin 4.0.1

I am building a sandbox for internal use, making sure we always get the latest versions of packages, when setting up a new sandbox. I can restrict this if need be, tho interested in getting it sorted.

Inability to work with webpack@5 and html-webpack-plugin@^4.5.0

Attempting to build using a simple config object as described in the specs fails due to TypeError: Cannot read property 'tap' of undefined.

Webpack config

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({
            title: indexHtmlTitle,
            template: paths.root + '/src/index.html',
            meta: indexHtmlMetaTagData
        }),
        new InterpolateHtmlPlugin(myConfigObj),
        ...
    ]
};

Output

TypeError: Cannot read property 'tap' of undefined
    at \myapp\node_modules\interpolate-html-plugin\index.js:36:63
    at Hook.eval [as call] (eval at create

Expected result

InterpolateHtmlPlugin to work as expected with webpack@5, html-webpack-plugin@^4.5.0, etc.

Edit: Added the HtmlWebpackPlugin config to plugins array to show that the suggestion in issue 5 to put HtmlWebpackPlugin above InterpolateHtmlPlugin does not solve the issue.

upgrade

https://github.com/facebookincubator/create-react-app/blob/fe7b5c212b5127775287ce444947f4c604c024dd/packages/react-dev-utils/InterpolateHtmlPlugin.js

to the latest version? just style changes

TypeError: Cannot read property 'compilation' of undefined

const InterpolateHtmlPlugin = require('interpolate-html-plugin');

new InterpolateHtmlPlugin({
    'NODE_ENV': 'development'
  }),

Add ts support ?

Do you have plans to support TypeScript ?