html 中的模板預設情況下把 thymeleaf 的 `${XXX}` 當作 ES 的 String Template 進行解析導致的 webpack 錯誤
阿新 • • 發佈：2018-12-13
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>
至此問題解決