Question

我需要在我的index.html文件中插入${variable}之类的值。我正在使用html-webpack-plugin，并且一切正常，直到我添加了这样的值。

这是用于进入Marketo的文件的，所以我需要能够在该页面上的样式标签内使用类似的变量。这些变量不是javascript，但是我认为这是一个javascript问题，因此我现在将它们放在script标签中以帮助解决该问题。

index.html ：

<script>
    var x = "John"
    var y = `hello, ${x}`
</script>

用于html-webpack-plugin的配置：

 new HtmlWebpackPlugin(      
    {
        title: 'Index',
        filename: 'index.html',
        template: 'src/index.html',
        inject: true,
    }
)

当我尝试使用页面上的语法编译页面时，出现以下错误：

ERROR in Template execution failed: ReferenceError: x is not defined

ERROR in   ReferenceError: x is not defined

  - index.html:100
    /Users/vernb/Code/src/index.html:100:    10

  - index.html:103 ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html.module.exports
    /Users/vernb/Code/src/index.html:103:    3

  - index.js:284 Promise.resolve.then
    [lps-the-good-one]/[html-webpack-plugin]/index.js:284:18

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

Answer 1

您需要为HtmlWebpackPlugin提供templateParameters模板需要呈现的模板：

new HtmlWebpackPlugin(      
    {
        title: 'Index',
        filename: 'index.html',
        template: 'src/index.html',
        templateParameters: { x: 'Value of x' }
        inject: true,
    }
)

在HTML-webpack-plugin中使用插值

1 个答案: