Wrong InterpolateHtmlPlugin hook for env var replacement

[GuiHash]

Is this a bug report?

Yes

Steps to Reproduce

1. create a new CRA project
2. add this script in your index.html :

<script>
    var isProduction = '%NODE_ENV%' === 'production'
</script>

3. run yarn build

Expected Behavior

Expect index.html output :

<!-- content before -->
<script>var isProduction = !0</script>
<!-- content after -->

Actual Behavior

Actual index.html output :

<!-- content before -->
<script>var isProduction = !1</script>
<!-- content after -->

Why it happens ?

The bug is due to wrong event/hook selection in InterpolateHtmlPlugin.

With beforeEmit event, The uglification of javascript in the index.html is done before the replacement of environment variables, so step by step we have :

1. raw js

var env = '%NODE_ENV%'
var isProduction = '%NODE_ENV%' === 'production' 

2. uglify (+ compress)

var env='%NODE_ENV%'
var isProduction=!1

3. replace env var

var env='production'
var isProduction=!1

How to fix ?

In html-webpack-plugin, html minification (and js uglify) is done via html-minifier just after the afterTemplateExecution.

So we need to use the afterTemplateExecution event to replace env vars before uglify.
It's the first time where we have the html output, so It seams to be more relevant to replace env vars in the html with this hook.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[olessavluk]

Same issue was reported earlier - #5473

[olessavluk]

What about the following example:

<% if ("%NODE_ENV%" === "production") { %>
<script>
  console.log('it works!');
</script>
<% } %>

Since InterpolateHtmlPlugin applied afterTemplateExecution this placeholder would not be replaced.

Is it possible to run this plugin before any processing so it will work? Or maybe a better solution would be to pass ENV variables as options to HtmlWebpackPlugin, so they can be used during template execution?

[GuiHash]

@olessavluk,

This placeholder is not officially support by documentation.
Moreover, look at this issue : #4202

[olessavluk]

@GuiHash yes, this is what I am looking for. Thanks for pointing this issue!

However, I think it can be done without breaking changes (no need to change the file extension, and syntax right now). I will create separate issue & probably PR with proper description