html 中的模板默认情况下把 thymeleaf 的 `${XXX}` 当作 ES 的 String Template 进行解析导致的 webpack 错误

html plugin的设置如下

{
    minify: {
        removeAttributeQuotes:false
    },
    filename: 'index.html',
    template: './src/pages/index/index.html',
    inject: 'head',
    chunks: ['index']
}

页面内容如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
    <%=require('html-withimg-loader!../../blocks/header.html')%>
    <%=require('html-withimg-loader!../../blocks/navbar.html')%>
    <div id="app" class="container">
         <section class="container clearfix">
            <div class="layer-title aider2">
                    <em></em>  产品标题
            </div>
            <div class="layer pd0 clearfix">
                <div class="layer-inner">
                    <ul>
                        <li th:each="item : ${items}" th:text="${item}" th:class="${iterStat.last}? 'last'">产品信息</li>
                    </ul>
                </div>
            </div>
        </section>
        <img src="${require('../../images/vue.png')}" width="256px"/>
    </div>

<!--引入通用的 footer-->
<%=require('html-withimg-loader!../../blocks/footer.html')%>
</body>
</html>

报错信息如下

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

ERROR in   ReferenceError: items is not defined

  - index.html:168
    F:/workspace/boke/ebtwo/Product/Drafts/site-sample/project/mainc/pages/index/index.html:168:10

  - index.html:179 .de_modulesml-webpack-pluginb/loader.js!.c/pages/index/index.html.module.exports
    F:/workspace/boke/ebtwo/Product/Drafts/site-sample/project/mainc/pages/index/index.html:179:3

  - index.js:284 Promise.resolve.then
    [main]/[html-webpack-plugin]/index.js:284:18


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

尝试通过转义方式不行打包后转义的反斜杠还会存在
然后通过用raw-loader的方式如下图
在这里插入图片描述
也是不可以的
后边尝试用

<li th:each="item : <%='${items}'%>" th:text="<%='${item}'%>'" th:class="<%='${iterStat.last}'%>? 'last'">产品信息</li>

这种写法，可以通过但是不友好
最后领导将 blueimp-tmpl 进行 html 中的模板操作

{
    minify: {
        removeAttributeQuotes:false
    },
    filename: 'index.html',
    template: 'blueimp-tmpl-loader!./src/pages/index/index.html',
    inject: 'head',
    chunks: ['index']
}

记得安装

npm install blueimp-tmpl blueimp-tmpl-loader --save-dev

如果不行，记得查看一下webpack的版本是否过高，我注意到领导把 webpack 4.26.1取消安装了
最后的页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<!--引入通用的 header-->
{%# require('html-withimg-loader!../../blocks/header.html') %}
<!--引入通用的导航部分-->
{%# require('html-withimg-loader!../../blocks/navbar.html') %}
<!--页面的正式内容在这里-->
<div id="app" class="container">
    <h2>首页</h2>
    <div id="time-tick"></div>
     <section class="container clearfix">
        <div class="layer-title aider2">
                <em></em>  产品标题
        </div>
        <div class="layer pd0 clearfix">
            <div class="layer-inner">
                <ul>
                    <li th:each="item : ${items}>" th:text="${item}" th:class="${iterStat.last} ? 'last'">产品信息</li>
                </ul>
            </div>
        </div>
    </section>
    <img src="{%# require('../../images/vue.png') %}" width="256px"/>
</div>
<!--引入通用的 footer-->
{%# require('html-withimg-loader!../../blocks/footer.html') %}
</body>
</html>

至此问题解决

html 中的模板默认情况下把 thymeleaf 的 `${XXX}` 当作 ES 的 String Template 进行解析导致的 webpack 错误

猜你喜欢