Can’t access “process.env” variables in index.html or other html files

How can i get / access webpack ENV (process.env) variables during process time (not runtime in browser) ? the webpack.DefinePlugin(…) doesn’t seem to work in html files, i don’t have access to ENV variables in the main index.html

any solution ? is it normal ?

Author: Fantashit

1 thought on “Can’t access “process.env” variables in index.html or other html files

  1. I’m assuming you’re using something like HtmlWebpackPlugin since you reference process (build?) time, not runtime. To work around similar issues, I’ve configured my plugin like:

    Object.assign(pluginConfig, config);  
    return new HtmlWebpackPlugin({  
        vendorsFilename: process.env.NODE_ENV === 'production' ? 'vendors.min.js' : 'vendors.js',  
        inject: false,  
        hash: true  

    or replace with any other boolean logic if your DefinePlugin assignment doesn’t match the build time env.

    Then in my HTML template I’ll do something like:

    <script type="text/javascript" charset="utf-8" src="static/<%%= htmlWebpackPlugin.options.vendorsFilename %%>"></script>

    P.S. Webpack uses github issues for tracking bugs in webpack. For questions like this, please use StackOverflow.

Comments are closed.