How do I use insert/remove HTML from index.html using Webpack 2?

I'm more familiar with Gulp and totally new to WebPack, so I might not understand how things are supposed to work exactly.

I have some HTML that looks like this:

<!-- @if envMode="debug" -->
<script src="scripts/main.js"></script>
<script src="scripts/moduleA.js"></script>
<script src="scripts/moduleB.js"></script>
<!-- @endif -->

The syntax comes from the preprocess-loader.

In other words, when I want a debug build, the source files should be left unpacked and should function without a server or NPM.

When I need the production build, those scripts should be removed and the bundled version should be injected into the HTML.

After I run webpack, the JS files are bundled as expected in the dist/scripts/ folder, but index.html (on root) is left unprocessed.

1. How do I get Webpack to process index.html and copy the processed version to dist/?
2. How do I automatically insert the <script> to the bundled assets into index.html?

I don't want to generate an HTML file using the webpack html plugin as it has more than just the scripts, and I can't use the DefinePlugin either (as some circumstances prevent it from being viable option).

via user341554