带Webpack的MapboxGL：“ReferenceError：e未定义”（在vue-cli应用程序中）

Question

我正在使用vue-cli 2.9.3模板开发webpack个应用。我有一个使用MapboxGL的组件，使用import mapboxgl from 'mapbox-gl;'导入。

使用npm run dev开发一切正常。

我可以毫无问题地构建项目npm run build。但是，当使用MapboxGL导航到组件时，我在控制台上收到以下错误：

ReferenceError: e is not defined

来自Firefox或Chrome的DevTools无法建立到源地图（.js.map）文件的链接，因此错误消息不是很有帮助。

我能够在devtool: eval-source-map中使用devtool: source-map代替./config/index.js来使捆绑工作，但捆绑包大小变为＆gt; 8Mb这是不可接受的，它是not recommended in production。

我也试过没有源图，但我得到了同样的神秘错误。

如何在打包的捆绑包中调试此错误？我想至少能够看到错误的来源。

Answer 1

它似乎是一个带有MapboxGL和Webpack的known bug。

可以通过在./build/webpack.prod.conf.js中添加以下内容来解决：

module: {
     ...
     noParse: /(mapbox-gl)\.js$/,
     ...
}