title: How does bundle.js inject style content into index.html?
body: <p>I'm reading a Single Page Application(React) book which describes the use of bundler as:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import './App.css';
  
  export default function App() {
     ...
  }
  </code></pre>
  
  <blockquote>
    <p>When you use the import keyword to declare a dependency on static content, the decision about how to handle the content is left to the development tools i.e webpack. For small files, the content will be included in the <code>bundle.js</code> file, along with the JavaScript code required to add the content to the HTML document. This is what happens with the <code>App.css</code> file that was imported</p>
  </blockquote>
  
  <p>so I add a style in <code>App.css</code> to check:</p>
  
  <p><strong>App.css</strong> </p>
  
  <pre><code>testClass {
     background-color: red 
  }
  </code></pre>
  
  <p>I can see that index.html does have a style element that contain the content of <code>App.css</code>.
  I copied the <code>bundle.js</code> file to my code editor and tried searching <code>testClass</code> keyword in <code>bundle.js</code>, there was nothing. so what does it mean by "the content will be included in the <code>bundle.js</code> file"? I mean if it is there, I should be able to see some javascript code to manipulate DOM API as:</p>
  
  <pre><code>var styleNode = document.createElement('style');
  styleNode.styleSheet.cssText = 'testClass { background-color: red }';
  document.getElementsByTagName('head')[0].appendChild(styleNode);
  </code></pre>
  
  <p>The code is simplified by me, but you get the idea, which is that I should at least can locate testClass keyword in bundle.js if the content will be included in the <code>bundle.js</code> file? so how does bundle.js inject style content into index.html?</p>