How to defeat "initMap is not a function" when using webpack and babel?

Question

JavaScript

Hello. I'm trying to use the webpack assembly with babel, but in this case, for some reason, the initmap function for googlemaps does not work.

There is this piece of markup at the end of the html:

<script type="text/javascript" src="./js/bundle.js"></script>
<script type="text/javascript"  async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgD9raCgCP3YPNgS7DZyoB8t-Q8wCuaRY&callback=initMap"></script>

There is index.js which is the entry point for webpack:

//Google Maps init
function initMap() {
    var e = {
        lat: 40.714909,
        lng: -73.751213
    }
        , t = new google.maps.Map(document.getElementById("map"), {
        zoom: 16,
        center: e
    });
    new google.maps.Marker({
        position: e,
        map: t
    })
}

But when transpiling with babel, he adds his code to the beginning of the bundle file and it turns out like this:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./src/js/index.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/js/index.js":
/*!*************************!*\
  !*** ./src/js/index.js ***!
  \*************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


//Google Maps init
function initMap() {
    var e = {
        lat: 40.714909,
        lng: -73.751213
    },
        t = new google.maps.Map(document.getElementById("map"), {
        zoom: 16,
        center: e
    });
    new google.maps.Marker({
        position: e,
        map: t
    });
}

And in this case, the error "initMap is not a function" is obtained.
If you move the initMap function to another file and include it separately, everything is fine, but I would like to have one file. What could be the problem? Thanks in advance.

Answer 1

webpack.config.js

entry: 'entry.js',
output: {
  filename: 'bundle.js',
  library: 'App'
},

function initMap() {
    var e = {
        lat: 40.714909,
        lng: -73.751213
    }
        , t = new google.maps.Map(document.getElementById("map"), {
        zoom: 16,
        center: e
    });
    new google.maps.Marker({
        position: e,
        map: t
    })
}

export {
  initMap,
};

in the link parameters:
But if you do not use variables from other parts of the code in the function, it is easier to write the function in the script tag in html :

<script type="text/javascript" src="./js/bundle.js"></script>
<script>
//Google Maps init
function initMap() {
    var e = {
        lat: 40.714909,
        lng: -73.751213
    }
        , t = new google.maps.Map(document.getElementById("map"), {
        zoom: 16,
        center: e
    });
    new google.maps.Marker({
        position: e,
        map: t
    })
}
</script>
<script type="text/javascript"  async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgD9raCgCP3YPNgS7DZyoB8t-Q8wCuaRY&callback=initMap"></script>