31

html-loaderのドキュメントには、この例があります

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>

「リスト」はどこから来たのですか？補間スコープにパラメータを提供するにはどうすればよいですか?

template-string-loader のようなことをしたいと思います:

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

そしてfile.htmlで

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

しかし、うまくいきません。template-string-loader と html-loader を混ぜようとしましたが、うまくいきません。template-string-loader しか使用できませんでしたが、HTML の画像は webpack によって変換されません。

何か案は？ありがとうございました

4

7 に答える 7

4

笑われるかもしれませんが、HTMLWebpackPlugin で提供されるデフォルトのローダーを使用すると、HTML 部分ファイルの文字列を置換できます。

  1. index.html は ejs テンプレートです (ejs は HTMLWebpackPlugin のデフォルトのローダーです)。
  2. file.html は単なる html 文字列です (html-loader を介してロードされ、HTMLWebpackPlugin でデフォルトで利用可能ですか、それとも webpack に付属していますか?)

設定

HTMLWebpackPlugin で提供されるデフォルトの ejs テンプレートを使用するだけです

new HtmlWebpackPlugin({
    template: 'src/views/index.ejs',
    filename: 'index.html',
    title: 'Home',
    chunks: ['index'],
    templateParameters(compilation, assets, options) {
        return {
            foo: 'bar'
        }
    }
})

これが私の最上位のejsファイルです

// index.html 

<html lang="en" dir="ltr">
    <head>
        <title><%=foo%></title>
    </head>
    <body>
        <%
            var template = require("html-loader!./file.html");
        %>
        <%= template.replace('${foo}',foo) %>
    </body>
</html>

これは、文字列としてエクスポートする file.htmlhtml-loaderです。

// file.html 

<h1>${foo}</h1>
于 2019-01-26T02:06:37.107 に答える