title: Build to style tag using webpack
body: <p>In my webpack project, I want to inject styles as a <code>&lt;style&gt;</code> tag into the page, using JavaScript, rather than referencing an external file via a <code>&lt;link&gt;</code> tag. I am using <a href="https://github.com/webpack/style-loader" rel="nofollow"><code>style-loader</code></a> for styles currently, and it outputs a bunch of link tags in the head.</p>
  
  <p>Rather than this:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="/things"&gt;
      &lt;link rel="stylesheet" type="text/css" href="/things"&gt;
      &lt;link rel="stylesheet" type="text/css" href="/things"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  </code></pre>
  
  <p>I want this:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;style&gt;
      /* things here */
    &lt;/style&gt;
    &lt;body&gt;
  </code></pre>
  
  <p>Is there any way of doing this?  I had a read of the <a href="https://webpack.github.io/docs/stylesheets.html" rel="nofollow">documentation</a> but it only mentions building CSS output files, not outputting to a style tag in this way.</p>
  
  <p>Reasons:</p>
  
  <ol>
  <li>I am publishing a module to be included via NPM/Bower, and I would rather keep the build as a single package, rather than having to revert to </li>
  <li>It is faster.  There is a lot of literature around minimising the number of requests, including from webpack:  <a href="https://github.com/christianalfoni/react-webpack-cookbook/wiki/Inlining-images" rel="nofollow">https://github.com/christianalfoni/react-webpack-cookbook/wiki/Inlining-images</a></li>
  </ol>