Question

Webpack是我在很长一段时间内见过的最令人沮丧的工具之一。它有循环的文档，它非常不友好和非交互式。如果它失败了 - 它就像一个黑盒子 - 你无法与它互动并问出错误。

我的配置大部分都在工作，但只有一个恼人的警告，我无法摆脱。警告看起来好像某个模块试图require index.html并且看起来像默认的javascript加载器只是无法解析它：

WARNING in ./app/index.html
Module parse failed: /home/burkov/Documents/Projects/bostongene/workflows/workflows/workflows/frontend/app/index.html Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <html>
|     <head>
|         <base href="/">
 @ ./app \.html$

我的配置在index.html加载程序中明确排除了ngtemplate：

...
module: {
    ...
    loaders: [
        ...
        {
            test: /\.html$/,
            exclude: `${path.join(__dirname, "/app/index.html")}`,
            loaders: [`ngtemplate?relativeTo=${__dirname}`, "html"] //html?attrs[]=div:ng-include
        }
    ]
}

如果没有此排除，我会收到类似this的错误。

。我想知道：

谁（代码行）尝试加载index.html模块，导致警告？
哪个加载器负责加载此文件？

Answer 1

哦，真是一种解脱！

在Webpack中有一个非常好的工具，它生成调用图，甚至解释了用于加载每个文件的加载器：

http://webpack.github.io/analyse/

所以，as Sokra instructed，我们生成一个带有webpack --profile --json > stats.json的调用图json，并将此json粘贴到该网页（或者只是仔细阅读）。该工具生成一个很好的交互式调用图：

在我的情况下，事实证明我需要项目中的所有html模板（包括index.html，愚蠢我），我明确地从ngTemplateLoader中排除了这些模板，因此通用的javascript加载器试图加载它并失败。

Webpack尝试加载一个模块，我没有要求它加载和失败。怎么调试？

1 个答案: