title: How to transpile a script tag within an HTML document during a webpack build?
body: <p><em>Note: I am aware of <a href="https://github.com/babel/babel-standalone#usage" rel="nofollow noreferrer">https://github.com/babel/babel-standalone#usage</a> and am not asking about transpiling in the browser.</em></p>
  
  <p>I'm wondering if <em>either</em> of the following is possible:</p>
  
  <p><strong>Option 1 - Transpile stuff in an HTML file</strong></p>
  
  <p>Say I have the following <code>src/index.html</code> with some inline ES6:</p>
  
  <pre><code>&lt;!-- src/index.html --&gt;
  &lt;h1&gt;This is some HTML stuff...&lt;/h1&gt;
  &lt;script&gt;
       () =&gt; console.log('I am some inline JS.');
  &lt;/script&gt;
  </code></pre>
  
  <p>After some type of build end up with the following <code>dist/index.html</code> which has inline ES5:</p>
  
  <pre><code>&lt;!-- dist/index.html --&gt;
  &lt;h1&gt;This is some HTML stuff...&lt;/h1&gt;
  &lt;script&gt;
      function() {
          console.log('I am some inline JS.');
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Option 2 - Concatenate transpiled JS to an HTML file</strong></p>
  
  <p>Say I have the following <code>src</code> files:</p>
  
  <pre><code>&lt;!-- src/index.html --&gt;
  &lt;h1&gt;This is some HTML stuff...&lt;/h1&gt;
  </code></pre>
  
  <p>and a JS which contains ES6:</p>
  
  <pre><code>// src/index.js
  () =&gt; console.log('I am some JS from another file.');
  </code></pre>
  
  <p>After some type of build end up with the following <code>dist/index.html</code> which has inline ES5 concatenated to the bottom of the file in a <code>script</code> tag:</p>
  
  <pre><code>&lt;!-- dist/index.html --&gt;
  &lt;h1&gt;This is some HTML stuff...&lt;/h1&gt;
  &lt;script&gt;
      function() {
          console.log('I am some JS from another file.');
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I've looked through a bunch of webpack loaders, but nothing seems to fit this. There may be a really simple solution, but what am I missing? Is there a babel plugin or webpack loader which could handle either of these. </p>
  
  <p>P.S. I would prefer a setup with Option 1.</p>