Webpack (angular cli): 有没有办法获取导致异常的文件名？

Question

所以我从 SystemJS 迁移到 Webpack (angular-cli)，我必须说，真正让我感到困扰的一件事是，使用 webpack 时，错误没有引用原始文件名，因为它们都是捆绑在一起的。

我是否遗漏了什么，因为这对我来说是一个主要问题，我无法想象 Webpack 会如此受欢迎，因为这样一个关键的镜头即将到来；所以我确定我错过了什么。

这是一个例子：

    Service Worker registered
App loaded ready
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
EXCEPTION: Uncaught (in promise): Cannot decode base64
  ErrorHandler.handleError  
  next  
  schedulerFn   
  SafeSubscriber.__tryOrUnsub   
  SafeSubscriber.next   
  Subscriber._next  
  Subscriber.next   
  Subject.next  
  EventEmitter.emit 
  NgZone.triggerError   
  onHandleError 
  ZoneDelegate.handleError  
  Zone.runGuarded   
  _loop_1   
  drainMicroTaskQueue   
ORIGINAL STACKTRACE:
  ErrorHandler.handleError  
  next  
  schedulerFn   
  SafeSubscriber.__tryOrUnsub   
  SafeSubscriber.next   
  Subscriber._next  
  Subscriber.next   
  Subject.next  
  EventEmitter.emit 
  NgZone.triggerError   
  onHandleError 
  ZoneDelegate.handleError  
  Zone.runGuarded   
  _loop_1   
  drainMicroTaskQueue   
Error: Uncaught (in promise): Cannot decode base64
    at resolvePromise (http://localhost:4203/main.bundle.js:204090:31) [angular]
    at http://localhost:4203/main.bundle.js:204127:17 [angular]
    at Object.onInvokeTask (http://localhost:4203/main.bundle.js:64676:37) [angular]
    at ZoneDelegate.invokeTask (http://localhost:4203/main.bundle.js:203876:40) [angular]
    at Zone.runTask (http://localhost:4203/main.bundle.js:203766:47) [<root> => angular]
    at drainMicroTaskQueue (http://localhost:4203/main.bundle.js:204020:35) [<root>]
  ErrorHandler.handleError  
  next  
  schedulerFn   
  SafeSubscriber.__tryOrUnsub   
  SafeSubscriber.next   
  Subscriber._next  
  Subscriber.next   
  Subject.next  
  EventEmitter.emit 
  NgZone.triggerError   
  onHandleError 
  ZoneDelegate.handleError  
  Zone.runGuarded   
  _loop_1   
  drainMicroTaskQueue   
Unhandled Promise rejection: Cannot decode base64 ; Zone: angular ; Task: Promise.then ; Value: Cannot decode base64 
  consoleError  
  _loop_1   
  drainMicroTaskQueue   
Error: Uncaught (in promise): Cannot decode base64
    at resolvePromise (http://localhost:4203/main.bundle.js:204090:31) [angular]
    at http://localhost:4203/main.bundle.js:204127:17 [angular]
    at Object.onInvokeTask (http://localhost:4203/main.bundle.js:64676:37) [angular]
    at ZoneDelegate.invokeTask (http://localhost:4203/main.bundle.js:203876:40) [angular]
    at Zone.runTask (http://localhost:4203/main.bundle.js:203766:47) [<root> => angular]
    at drainMicroTaskQueue (http://localhost:4203/main.bundle.js:204020:35) [<root>]
  consoleError  
  _loop_1   
  drainMicroTaskQueue   

但它在任何地方都没有指示文件名？！？！？

我可以打开一些神奇的源映射吗？

感谢阅读，

肖恩。

Answer 1

我假设您收到的错误来自浏览器控制台。

如果您想在打包/编译时获得详细的错误信息，可以使用stat 配置和webpack.config.js。

...},
stats: {
 colors: true,
modules: true,
 reasons: true,
 errorDetails: true
},
...

否则，如果您使用 webpack CLI，那么您可以提供以下标志，

webpack --colors --display-error-details

但您共享的错误似乎来自您的应用程序而不是来自 webpack。所以报告的错误不是 webpack 而是你的应用程序。您的整个应用程序捆绑为单个文件，这就是为什么您没有获得有关执行失败的文件的任何信息的原因。

从您的错误日志中可以清楚地看出，根据错误日志创建组件AppComponent 的实例时出现错误。

ReferenceError: foo is not defined
    at new AppComponent (http://localhost:4201/main.bundle.js:96921:21)

由于您在浏览器中运行应用程序时遇到此错误，因此您必须调试AppComponent。

此错误不是来自 Webpack，而是来自您的应用程序。捆绑后，您将收到http://localhost:4201/main.bundle.js:96921:21。

到 debug 你的 webpack 包，启用 devtool 和 source-map 值，如下所示。

{
    devtool: "source-map"
}