Co dokładnie mam zrobić z "module.exports = 'html_template_content'" na opakowaniu sieciowym

Question

Więc chcę zrobić bardzo proste zadanie przy użyciu pakietu internetowego.

Mam kilka statycznych szablonów HTML, takich jak np.

test.html

<div><span>template content</span></div> 

i wszystko, co chcesz zrobić, to wrócić ciąg wewnątrz szablonu np

require("raw!./test.html") 

ze powinien zwrócić ciąg jak:

"<div><span>template content</span></div>" 

ale zamiast tego zwraca następujący ciąg

"modules.exports = <div><span>template content</span></div>" 

Próbowałem kilku modułów, takich jak raw-loader i html-loader. i oba zachowują się w taki sam sposób. Więc przyjrzałem się kodowi źródłowemu, tylko po to, aby przekonać się, że jest on SUPPOSED, aby zachowywać się w ten sposób.

więc co dokładnie mam oczekiwać z tym zrobić, jeśli chcę tylko surowe HTML? czy jest to zła praktyka po prostu usunąć poprzedni "module.exports =" ciąg? z wiązką EDIT: usunięcie „modules.export =” wyników udział w wiązce powrocie nic:/

mój config

module.exports = 
{ 
    module: 
    { 
     loaders: 
      [ 
       { test: /\.html$/, loader: "raw-loader" } 
      ] 
    } 
}; 

Answer 1

znalazłem brudne obejścia przy użyciu eval

console.log(eval(require("raw!./test.html"))); 

To rzeczywiście zwraca szablon HTML, ale zostawię to rozwiązanie do dyskusji, dopóki nie znalazłem lepszego.

Answer 2

Kiedy piszesz require('./test.html') to znaczy, że po prostu uruchomić kod zwrócone przez sieć ładowarek. Wynik jest eksportowany w tym kodzie jako module.exports. Aby wykorzystać ten wynik trzeba przypisać wymagają oświadczenie zmiennej:

var htmlString = require('raw!./test.html'); 
//htmlString === "<div><span>template content</span></div>" 

Pamiętaj, że każda ładowarka w Webpack zwraca kod JS - nie HTML, a nie CSS. Możesz użyć tego kodu, aby uzyskać HTML, CSS i cokolwiek innego.

Answer 3

Rozwiązaniem jest wymagać plik bez określenia jakichkolwiek dodatkowych ładującego, jak to już podano w config WebPACK

const test = require('./test.html') 

wyjaśnienie: z aktualnym kodem ubiegasz ładowarka raw dwukrotnie do pliku . Po określeniu łańcucha ładowania w swojej konfiguracji:

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

...jesteś już mówienie WebPACK dodać tę ładowarkę do sieci ładowarki za każdym razem wymagają plik pasujący stan test (tutaj każdy plik HTML)

Dlatego, kiedy piszę ten

const test = require('raw!./test.html') 

... w rzeczywistości jest on równoważny z tą wartością:

const test = require('raw!raw!./test.html')