title: Why does my dynamic import make 2 network request?
body: <p>I have a file where I import some css (via raw-loader) and put it in a style tag in the head of my document, then I default export the corresponding react-component.</p>
  
  <pre class="lang-js prettyprint-override"><code>// Swiper.js
  import swiperStyles from '!!raw-loader!swiper/dist/css/swiper.min.css';
  
  const swiperElement = document.createElement('style');
  swiperElement.innerHTML = swiperStyles;
  
  document.head.append(swiperElement);
  
  export { default } from 'react-id-swiper';
  </code></pre>
  
  <p>When I lazy load this file webpack I get 2 network requests.</p>
  
  <pre class="lang-js prettyprint-override"><code>const Swiper = import('./Swiper');
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/7PYMR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7PYMR.png" alt="Network requests in my browser"></a></p>
  
  <p>The second file only contains the style tag creation and putting it in the head, the css and the code for the react-component are in the first "vendor" file. Why does webpack split it into 2 files and how do I avoid that? I use create-react-app if that matters.</p>