title: How to call minified functions from HTML?
body: <p>I am trying to convert an old (Django) application to use modern JavaScript in the front-end, with minification, modules and so on.</p>
  
  <p>Previously I had a simple <code>map.js</code> file which just had a function to draw a map:</p>
  
  <pre><code>function setupMap(lng, lat, zoom) {
      // draw map, based on lat/lng etc
  }
  </code></pre>
  
  <p>And I called it from my HTML pages directly, after pulling in jQuery and <code>map.js</code> (each of the application's pages relates to a particular place, so I want to draw a map of the place):</p>
  
  <pre><code>&lt;script src="cdn/link/to/jquery"&gt;&lt;/script&gt;
  &lt;script src="maps.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      setupMap(lat, lng, zoom);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>That worked fine. But I am trying to do things the modern way. So I would like to bundle jQuery into the file, and I would like to minify the JS.</p>
  
  <p>I have installed jQuery with <code>npm</code> and amended the <code>map.js</code> file to import it as a module:</p>
  
  <pre><code>var $ = require("jquery");
  function setupMap(lng, lat, zoom) {
     // etc
  </code></pre>
  
  <p>And I have set <code>webpack.config.js</code> to minify the file:</p>
  
  <pre><code>module.exports = {
      entry: './index.js',
      output: {
          filename: 'main.min.js',
          path: __dirname
      },
      module: {}
  };
  </code></pre>
  
  <p>And I have updated my HTML to look like this instead:</p>
  
  <pre><code>&lt;script src="main.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      setupMap(lat, lng, zoom);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But now I get an error from the HTML: <code>Uncaught ReferenceError: setupMap is not defined</code>. </p>
  
  <p>What am I doing wrong? How should I be doing things differently? I am lost.</p>
  
  <p>---- UPDATE -----</p>
  
  <p>Thanks for all the answers! I should have clarified that I do need <em>some</em> page-specific code, because my Django application has a page for each place (100s of them) and the <code>lat</code> and <code>lng</code> variables are specific to each page. So I need to call the <code>setupMap</code> function separately on each page. </p>