如何使用要求的WebPack

在帕格的圖像，我有以下的配置爲我的哈巴狗文件...如何使用要求的WebPack

{ 
    test: /\.pug$/, 
    loaders: ["pug-html"] 
}

這個偉大的工程，現在我想補充一點，我加載使用URL裝載機的圖像。我的結構是這樣的

src 
    ... 
    thing 
     thing.template.pug 
     thing.png

我想包括PNG所以哈巴狗文件我加...

IMG（SRC = 「thing.png」）

這沒有按」 t解決，所以我嘗試了img(src=require("thing.png"))之類的東西。這些都不起作用。我試着添加HTML裝載機這樣的...

{ 
     test: /\.pug$/, 
     loaders: ["html?interpolate=require&-minimize", "pug-html"] 
},

但後來我得到...

Module not found: Error: Cannot resolve directory './\"thing.png\"' in .../src/.../thing 
@ ./src/.../thing/thing.template.pug 1:128-164

這一切工作正常在我的手寫筆...

{ 
     test: /.*[^\.global]\.styl$/, 
     loaders: ["to-string", "css", "stylus"] 
    },

我也試過...

img(src=statesmall.png)

and get Cannot read property 'png' of undefined

另外，如果我評論說，線路輸出，在那裏我看到了HTML ...

"Template parse errors: 
Unexpected closing tag "div" ("module.exports = "<div><h1>Hey</h1><div class=\"terminal-output\">this thing</div>[ERROR ->]</div>";"): [email protected]:97"

如何要求哈巴狗的圖像？

來源

2017-01-05 Jackie

就這樣結束了，我的工作（雖然不是真的是我想要的）......

{ 
    test: /\.pug$/, 
    loaders: ["apply", "pug"] 
}, 

img(src=require("./thing.png"))

當然，我不喜歡在包裝的要求時，我應該能夠管HTML裝載機但我無法讓它工作。

來源

2017-01-05 04:04:25 Jackie

您好Jackie，我面臨着同樣的問題，以獲得在我的哈巴狗模板的圖像工作，我有相同的webpack配置，並嘗試通過使用require需要的png，它不工作，並說require是未定義的..也許我錯過了一些東西，你可以幫助解決這個問題嗎？ – Edrees

這聽起來像你不包括節點類型... 我會嘗試將這些添加到您的package.json ... ''' 「@ types/core-js」：「^ 0.9.43 「，」@ types/jasmine「：」^ 2.6.0「，」@ types/jquery「：」^ 3.2.12「，」@ types/node「：」^ 8.0.30「， ' ' – Jackie

我知道這是晚了幾個月，但我在html-loader documentation時發現了一個答案，當時我剛剛遇到同樣的問題。

基本上，每次加載程序發現它默認嘗試解析img標記，但您可以將attrs查詢參數設置爲false以停止此行爲。當然，你現在必須注意與被渲染的HTML所在的構建文件夾相關的img路徑，它不再依賴於url-loader。

來源

2017-05-08 18:45:48 Rafael

如何使用要求的WebPack

回答

相關問題