How to use Webpack with Google Maps API?
<p>I am using Webpack + html-webpack-plugin to build all my static files. The thing is, when I am using it with Google Maps API, it's not working.</p>

<p>I have this code:</p>

<pre><code>var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  // the other code, irrelevant
}
</code></pre>

<p>And a HTML file:</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script async="async" defer="defer"
      src="https://maps.googleapis.com/maps/api/js?key=&lt;token here&gt;&amp;callback=initMap"&gt;
    &lt;/script&gt;
   &lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>If I run just this file, everything works fine. But if I run this with, webpack it complaints about 'initMap is not a function'. I've looked inside the output, and it seems like initMap is declared not as global function, but as a function inside a module or something like that, so maybe that's the issue.</p>

<p>How should I use Google Maps API with webpack? I know that I can bundle some libs with my script, such as react, should I do the same? What should be the approach here?</p>

<p>UPD: Here is my webpack.config.js:</p>

<pre><code>/* eslint-disable */
const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const nodeModules = {}
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod
  })

const htmlMinifierObj = {
  collapseWhitespace: true,
  removeComments: true
}

module.exports = [
// the first object compiles backend, I didn't post it since it's unrelated
{
 name: 'clientside, output to ./public',
 entry: {
   script: [path.join(__dirname, 'clientside', 'script.js')]
 },
 output: {
   path: path.join(__dirname, 'public'),
   filename: '[name].js'
 },
 module: {
   loaders: [
     {
       test: /\.js$/,
       loader: 'babel',
       query: { presets:['es2015', 'stage-0'] }
     }
   ],
 },
 plugins: [
   //new webpack.optimize.UglifyJsPlugin({minimize: true}),
   new HtmlWebpackPlugin({
     template: 'clientside/index.html',
     inject: 'body',
     chunks: ['script'],
     minify: htmlMinifierObj
   })
 ],
}]
</code></pre>

<p>And the output HTML is (I've removed importing <code>script.js</code> from my source file, because it's added by webpack, and turned off the minimization, just for readability):</p>

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;a href="/login/facebook"&gt;Login&lt;/a&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGSgj5Ts10UdapzUnWlr34NS5cuoBj7Wg&amp;callback=initMap"&gt;
    &lt;/script&gt;
&lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>