webpack 详细的错误信息

Question

我正在使用 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但不确定如何了解更多。

Answer 1

@bsr

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

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

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

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

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

Answer 3

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

显然这个 PR 试图解决它

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

We have plugins we use that were thowing errors that were strings. However the errors reporrted were

Error undefined which was little to no help. Now we actually get the error reporting we need.

Stats now error reporting catches string errors. Some plugins appear to not obey the rules on error reporting. However this makes debuging a nightmare for users. Therefore the string should be allowed.

webpack 详细的错误信息

webpack verbose error message

node.js

webpack