webpack 详细错误信息答案

【问题标题】：webpack verbose error messagewebpack 详细错误信息
【发布时间】：2015-05-24 12:53:48
【问题描述】：

我正在使用 webpack，最近更新了几个包（babel、babel-loader、..），并在 webpack 输出中看到错误。但是，不确定如何进一步调试。该应用程序似乎工作正常。我尝试了各种调试选项，但没有得到详细的错误输出。

 ./node_modules/.bin/webpack  --config webpack.config.js --progress --profile --colors --display-error-details --display-reasons --debug
NODE_ENV == production :  false
6809ms build modules      
14ms seal
55ms optimize
30ms hashing
59ms create chunk assets
27ms additional chunk assets
1551ms optimize chunk assets
33ms optimize assets
83ms emit
Hash: 5be1a8485c4110c2f837
Version: webpack 1.9.8
Time: 8674ms
      Asset       Size  Chunks             Chunk Names
mww7few.ttf    78.4 kB          [emitted]   
elilql0.png    7.47 kB          [emitted]  
  client.js    3.98 MB       0  [emitted]  main
 index.html  130 bytes          [emitted]  
   [0] multi main 52 bytes {0} [built]
       factory:0ms building:3ms = 3ms
    + 387 hidden modules

ERROR in undefined

我不确定ERROR in undefined 是什么。我怀疑加载程序有问题，因为我更新了babel-loader但不知道如何了解更多信息。

【问题讨论】：

标签： node.js webpack

【解决方案1】：

@bsr

我最近遇到了同样的问题。原来它来自 HtmlWebpackPlugin。我忘了传递一个标题

new HtmlWebpackPlugin({
  ....
  title: 'Title'
}),

在我的模板上我有这个 <title>{%=o.htmlWebpackPlugin.options.title

因此，如果您使用 HtmlWebpackPlugin，请确保在此处传递所有参数。

【讨论】：

感谢您的提示。不过对我来说它不是 HtmlWebpackPlugin。但这给了我一个提示。我将重新检查我的插件的配置。 +1
尝试创建一个空白函数function hello() { } 然后将其用作入口点，看看您的 webpack 配置是否有问题。如果错误消失，则说明您的代码有些问题，否则您可以删除每个插件。
谢谢。你的直觉是对的。 github.com/ampedandwired/html-webpack-plugin/issues/50 。另外，您的调试方法可以帮助我确定原因。非常感谢。

【解决方案2】：

这是 webpack-html-plugin 1.4 版中的一个错误，已在 1.5 中修复

错误的原因是 o.htmlWebpackPlugin.assets 已被弃用。
您应该改用 o.htmlWebpackPlugin.files 才能使用 css 和清单文件：

<!DOCTYPE html>
<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest %}"{% } %}>
  <head>
    <meta charset="UTF-8">
    <title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
    {% if (o.htmlWebpackPlugin.files.favicon) { %}
    <link rel="shortcut icon" href="{%=o.htmlWebpackPlugin.files.favicon%}">
    {% } %}
    {% for (var css in o.htmlWebpackPlugin.files.css) { %}
    <link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
    {% } %}
  </head>
  <body>
    {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
    <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
    {% } %}
  </body>
</html>

但是，还有更简单的方法。
webpack-html-plugin 1.3+ 具有将所有资产（css、favicon、javascript 和清单文件）注入模板的功能。所以你的配置可能是这样的：

new HtmlWebpackPlugin({
  inject: true,
  template: 'template.html',
  title: 'Custom template',
})

和模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
  </head>
  <body>
  </body>
</html>

【讨论】：

【解决方案3】：

如果有人遇到这个问题并且这不是 htmlWebpackPlugin 的问题，IMO 实际问题出在 Webpack 本身，它没有提供正确的错误。

显然这个 PR 试图解决它

https://github.com/webpack/webpack/pull/1146

我们使用的插件会抛出字符串错误。但是报告的错误是

未定义的错误几乎没有帮助。现在我们实际上得到了我们需要的错误报告。

Stats 现在错误报告会捕获字符串错误。出现一些插件不遵守错误报告规则。然而，这使得调试用户的噩梦。因此应该允许该字符串。

【讨论】：