title: Webpack: How to export directly to global (without .default) containing stylesheet imports?
body: <h1>Context</h1>
  <p>I have a <code>webpack.config.js</code> like this:</p>
  <pre><code>/* Something here */
  
  module.exports = {
    entry: {
      main: './src/index.js'
    },
    output: {
      library: 'MyClass',
      libraryTarget: 'umd',
      path: path.resolve(__dirname, 'lib'),
      filename: `package.js`
    },
    ...
  }
  </code></pre>
  <p>My <code>./src/index.js</code> looks like this:</p>
  <pre><code>import MyClass from 'src/myClass'
  import 'src/myStyle.css'
  
  export default MyClass
  </code></pre>
  <h1>Problem</h1>
  <p>While this works fine, it exposes <code>MyClass</code> class to <code>window</code> object as:</p>
  <pre><code>console.log(window.MyClass)
  =&gt; Module {default: ƒ, __esModule: true, Symbol(Symbol.toStringTag): &quot;Module&quot;}
  </code></pre>
  <p>This way, I cannot invoke my class by using:</p>
  <pre><code>new MyClass();
  =&gt; TypeError: MyClass is not a constructor
  </code></pre>
  <p>I have to invoke it like:</p>
  <pre><code>new MyClass.default();
  =&gt; MyClass { ... }
  </code></pre>
  <p>I can solve the problem by doing something like this in my <code>./src/index.js</code>:</p>
  <pre><code>const MyClass = require('src/myClass')
  module.exports = MyClass
  
  /* in browser */
  new MyClass()
  =&gt; Good, works fine
  </code></pre>
  <p>However, this way, I cannot <code>import</code> my stylesheet:</p>
  <pre><code>const MyClass = require('src/myClass')
  import 'src/myStyle.css'
  
  module.exports = MyClass
  =&gt; TypeError: Cannot assign to read only property 'exports' of object '#&lt;Object&gt;'
  </code></pre>
  <p><strong>Edit</strong></p>
  <p>The following way also solves the problem, but is done without an <code>export</code>:</p>
  <pre><code>/* webpack.config.js */
  module.exports = {
    entry: {
      main: './src/index.js'
    },
    output: {
      /* Need to remove library related props */
      // library: 'MyClass',
      // libraryTarget: 'window',
      path: path.resolve(__dirname, 'lib'),
      filename: `package.js`
    },
    ...
  }
  
  /* ./src/index.js */
  import MyClass from 'src/myClass'
  import 'src/myStyle.css'
  
  window.MyClass = MyClass
  </code></pre>
  <h1>Question</h1>
  <p>Is there a way in Webpack for me to <code>export</code> a module directly to global without having to invoke with <code>.default</code> <em>and</em> at the same time <code>import</code> a stylesheet in the entry file?</p>