Google Maps API에서 Webpack을 사용하는 방법은 무엇입니까?

나는 모든 정적 파일을 만들기 위해 Webpack + html-webpack-plugin을 사용하고 있습니다. 그것은 Google Maps API에서 사용할 때 작동하지 않습니다. 난 그냥이 파일을 실행하면 모든 것이 잘 작동Google Maps API에서 Webpack을 사용하는 방법은 무엇입니까?

<!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>

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 
}

그리고 HTML 파일 :

나는이 코드를 가지고있다. 하지만 이걸 실행하면 'initMap은 함수가 아닙니다'라는 불만이 있습니다. 출력 결과를 살펴 봤는데 initMap이 전역 함수가 아닌 모듈 내부의 함수 또는 이와 비슷한 것으로 선언되었으므로 문제가 될 수 있습니다.

webpack과 함께 Google Maps API를 어떻게 사용해야합니까? 나는 반응과 같은 스크립트와 함께 libs를 묶을 수 있다는 것을 안다. 나는 똑같이해야 하는가? 여기에 접근해야하는 것은 무엇입니까?

UPD : 여기 내 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 
    }) 
], 
}]

그리고 출력 HTML (나는 그것이 웹팩 추가 있기 때문에, 내 소스 파일에서 script.js을 가져 제거 및 최소화를 해제 한 것입니다 단지) 가독성 :

는 함수 선언 후 script.js

에서

<!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>

출처

2016-11-13 serge1peshcoff

google maps API는 외부 소스로 보관해야하는 webpack으로 "포장하지 않습니다. script.js가 포장되지 않았거나 새 포장 된 j를 사용하지 않아서 실패했습니다. 귀하의 웹팩 설정 및 최종 html 파일을 보여주십시오. –

@DanyelDarkcloud 님이 – serge1peshcoff

, 다음과 같이 전역 범위에 함수를 추가

function initMap() { 
    // Some stuff 
} 
window.initMap = initMap;

출처

2016-11-13 16:13:17

질문을 업데이트했습니다. 고맙습니다. – serge1peshcoff

Google Maps API에서 Webpack을 사용하는 방법은 무엇입니까?

답변

관련 문제