title: Error using Javascript modules Webpack. Function methods not working ("is not a function" error)
body: <p>I'm just getting started working with webpack, but I'm stumped at a rather simple problem.</p>
  <p>To try to solve it, I've been looking around the web, but for some reason I can't find examples using vanilla javascript function methods with webpack. I have no problem exporting, importing, and executing imported functions.</p>
  <p>The problem is I can't execute imported <strong>function methods</strong>, and I don't understand why.
  The functions are imported correctly, and can be executed. The methods cannot be executed.</p>
  <p>In this case, I can execute model(), but when I try to call model.alertone(), I get the error &quot;model.alertone is not a function&quot;.</p>
  <p>Here is the code:</p>
  <p>model.js:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function model() {
  
      var alertone = () =&gt; {alert("This works")};
  
  
      return {
          alertone
      }
  
   };
  
  export default model;</code></pre>
  </div>
  </div>
  </p>
  <p>index.js:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import model from "./model.js";
  
  
  model();
  model.alertone();</code></pre>
  </div>
  </div>
  </p>
  <p>Webpack configuration:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path');
  
  module.exports = {
    mode: "development",
    entry: './src/index.js',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    }
  };</code></pre>
  </div>
  </div>
  </p>