2016-06-22 29 views
0

Webpack是我长期以来看到的最令人沮丧的工具之一。它有环绕文件,非常不友好,非互动。如果失败 - 就像一个黑匣子 - 你无法与之互动并询问出了什么问题。Webpack试图加载一个模块,我没有要求它加载和失败。如何调试?

我有我的配置主要工作,但有一个恼人的警告,我不能摆脱。警告看起来好像有些模块试图requireindex.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的错误。

。我想知道:

  1. 谁(哪行代码)试图加载index.html模块,导致警告?
  2. 什么样的加载程序负责加载这个文件?

回答

0

哦,真是一种解脱!

有在的WebPack,生成调用图一个非常好的工具,甚至解释说,使用了哪些加载器加载每个文件:

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

所以,as Sokra instructed,我们会生成webpack --profile --json > stats.json一个调用图JSON和将此json粘贴到该网页(或者只是仔细阅读)。该工具生成一个很好的互动调用图:

enter image description here

在我的情况下,原来,我需要在我的项目中的所有HTML模板(包括index.html,愚蠢的我),我明确地ngTemplateLoader排除在外,所以通用JavaScript加载器试图加载它并失败。