Jak korzystać z webpacka do konkatowania fragmentów html?

Na przykład, mam główny plik wpis HTML:Jak korzystać z webpacka do konkatowania fragmentów html?

<div> 
    <!-- I'd like to include a html partial here --> 
</div>

I mam częściowego HTML

<span>I'm a partial html piece</span>

Mam nadzieję, że mogę używać WebPACK wygenerować ostateczny html jak poniżej:

<div> 
    <span>I'm a partial html piece</span> 
</div>

Czy można to zrobić za pomocą wtyczki/wtyczek?

Źródło

2016-03-25 Chris

Istnieje kilka ładowarek do osiągnięcia tego celu: https://webpack.github.io/docs/list-of-loaders.html#templating

Na przykład:

html-loader

<div>${require('./partials/gallery.html')}</div>

ejs-html-loader

<% include some/file %>

Źródło

2016-03-25 08:26:35

Mam ten sam problem i kiedy używam

${require('./partials/gallery.html')}

, wymaganie nie jest interpretowane –

Nie mogę tego zrobić, czy możesz podać przykład pracy? – Ruby

Żadna z powyższych prac –

Możesz użyć tej wtyczki github.com/bazilio91/ejs-compiled-loader:

{ test: /\.ejs$/, use: 'ejs-compiled-loader' }

Zmień .html pliki .ejs i twój HtmlWebpackPlugin aby wskazywał na prawo .ejs Szablon:

new HtmlWebpackPlugin({ 
    template: 'src/views/index.ejs', 
    filename: 'index.html', 
    title: 'Home', 
    chunks: ['index'] 
})

Można importować partials, zmienne i aktywa Pliki .ejs:

src/views/partials/head.ejs:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <title><%= htmlWebpackPlugin.options.title %></title> 
</head>

src/js/ejs_variables.js:

const hello = 'Hello!'; 
const bye = 'Bye!'; 

export {hello, bye}

src/views/index.ejs:

<% include src/views/partials/head.ejs %> 
<body>  
    <h2><%= require("../js/ejs_variables.js").hello %></h2> 

    <img src=<%= require("../../assets/sample_image.jpg") %> /> 

    <h2><%= require("../js/ejs_variables.js").bye %></h2> 
</body>

notatkę, kiedy to częściowa ścieżka musi być w stosunku do głównego katalogu projektu.

Odpowiedziałem na to samo pytanie tutaj stackoverflow.com/a/48750048/7448956.

Źródło

2018-02-12 15:47:17 aaawww

Podczas gdy ten link może odpowiedzieć na pytanie, lepiej umieścić tutaj istotne części odpowiedzi i podać link do odsyłacza. Odpowiedzi dotyczące linków mogą stać się nieprawidłowe, jeśli strona z linkami się zmieni. - [Z recenzji] (/ opinia/niskiej jakości-posts/18799689) –

@JannesBotis Dzięki, zmieniłem odpowiedź. – aaawww

Jak korzystać z webpacka do konkatowania fragmentów html?

Odpowiedz

Powiązane problemy