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

Question

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

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

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

ReferenceError: e is not defined

Firefox 或 Chrome 的 DevTools 无法链接到 sourcemap (.js.map) 文件，因此错误消息不是很有帮助。

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

我也尝试过不使用源映射，但我遇到了同样的神秘错误。

如何在打包的捆绑包中调试此错误？我希望至少能够看到错误来自哪里。

Answer 1

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

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

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