Jak mogę podać parametry interpolacji interpretera html?

W dokumentacji html-loader jest to przykładJak mogę podać parametry interpolacji interpretera html?

require("html?interpolate=require!./file.ftl"); 

<#list list as list> 
    <a href="${list.href!}" />${list.name}</a> 
</#list> 

<img src="${require(`./images/gallery.png`)}"> 
<div>${require('./components/gallery.html')}</div>

Skąd „lista” pochodzi? Jak mogę podać parametry w zakresie interpolacji?

chciałbym zrobić coś takiego template-string-loader robi:

var template = require("html?interpolate!./file.html")({data: '123'});

a następnie w plik.html

<div>${scope.data}</div>

Ale to nie działa. Próbowałem połączyć szablon-ciąg-loader z html-loader, ale to nie działa. Mógłbym używać tylko szablonu-string-loadera, ale obrazy w kodzie HTML nie są przekształcane przez webpack.

Wszelkie pomysły? Dziękujemy

Źródło

2016-09-07 Patrick Lafrance

Nie jestem pewien, czy to rozwiązanie jest dla Ciebie odpowiednie, ale udostępnię mój przepływ pracy (przetestowany w pakiecie Webpack 3).

Zamiast html-loader można użyć tej wtyczki github.com/bazilio91/ejs-compiled-loader:

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

zmienić .html pliki .ejs i swojej HtmlWebpackPlugin się wskazywać na szablonie prawo .ejs:

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

Można importować partials, zmienne i zasoby w plikach .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.

Źródło

2018-02-12 15:36:46 aaawww

mustache-loader zrobiłem pracę dla mnie:

var html = require('mustache-loader!html-loader?interpolate!./index.html')({foo:'bar'});

Następnie w szablonie można użyć {{foo}}, a nawet wstawianie innych szablonów

<h1>{{foo}}</h1> 
${require('mustache-loader!html-loader?interpolate!./partial.html')({foo2: 'bar2'})}

Źródło

2018-02-20 11:40:40

Jak mogę podać parametry interpolacji interpretera html?

Odpowiedz

Powiązane problemy