title: How to export/import es6 js library
body: <p>I am creating a Es6 JS library with common tasks I usually use in my frontends and I have a few questions about how to organize so I can export/import the way I want. I have it organized this way:</p>
  
  <pre><code>src/
    module/
      function.js
      index.js // Module, exports grouped functions
    index.js // Enty point, exports entire library
  </code></pre>
  
  <p>src/index.js:</p>
  
  <pre><code>import module from './module/index';
  
  const library = {
    module
  };
  
  export default library;
  </code></pre>
  
  <p>src/module/index.js:</p>
  
  <pre><code>import func from './function';
  
  const module = {
    func
  };
  
  export default module;
  </code></pre>
  
  <p>src/module/function.js:</p>
  
  <pre><code>function func() {
    console.log('do things');
  };
  
  export default func;
  </code></pre>
  
  <p>I have no problems accesing those methods inside the library but I don't know how to configure webpack to be able to access them from outside the way I want. I want to be able to do something like this:</p>
  
  <pre><code>// Use all methods 
  import Library from 'library';
  
  Library.module.func();
  
  // Use only methods from module
  import module from 'library/module';
  
  module.func();
  
  // Use only 1 function
  import func from 'library/module/func';
  
  func();
  </code></pre>
  
  <p>By the way, how do I access the library If I just add the the JS created by webpack when I build the library. I mean, will I be able to do this?</p>
  
  <pre><code>&lt;script src="library.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      Library.module.func();
  &lt;/script&gt;
  </code></pre>
  
  <p>I have tried to configure webpack on my own with no luck. Library is always {}, undefined or I have to use Library.default. Some other times is not global. I have tried it with Vue and this is the result:</p>
  
  <pre><code>&lt;script src="library.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      const a = Library.default;
  
      new Vue({
        el: '#app',
        data: {},
        methods: {
          buttonClick() {
            a.module.func(); // works
            Library.default.module.func(); // CRASH cause is undefined
          }
        },
        created() {
          Library.default.module.func(); // works ???
        }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>To sum up:</p>
  
  <ol>
  <li>I don't know how to properly configure webpack to be able to import library, module or single functions.</li>
  <li>I don't even know If the way I organized the library is correct.</li>
  </ol>
  
  <p>Thank you for your help.</p>