Wrong InterpolateHtmlPlugin hook for env var replacement

Created by: 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.