2016-06-22 78 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加載器試圖加載它並失敗。