¿Cómo usar Webpack con la API de Google Maps?

Question

Nov 13, 2016, 04:42 PM

javascript html-webpack-plugin google-maps webpack

¿Cómo usar Webpack con la API de Google Maps?

Estoy usando Webpack + html-webpack-plugin para construir todos mis archivos estáticos. La cuestión es que, cuando lo estoy usando con la API de Google Maps, no funciona.

Tengo este codigo:

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
}

Y un archivo HTML:

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

Si ejecuto solo este archivo, todo funciona bien. Pero si ejecuto esto con, webpack se queja sobre 'initMap no es una función'. He mirado dentro de la salida, y parece que initMap se declara no como una función global, sino como una función dentro de un módulo o algo así, así que tal vez ese sea el problema.

¿Cómo debo usar la API de Google Maps con webpack? Sé que puedo agrupar algunas librerías con mi script, como reaccionar, ¿debería hacer lo mismo? ¿Cuál debería ser el enfoque aquí?

UPD: Aquí está mi webpack.config.js:

/* 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
   })
 ],
}]

Y el HTML de salida es (he eliminado la importaciónscript.js desde mi archivo fuente, porque es agregado por webpack y desactiva la minimización, solo para facilitar la lectura):

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