webpack。因为HtmlWebpackPlugin中的模板html使用了thymeleaf报错了

Question

我的HtmlWebpackPlugin配置是

new HtmlWebpackPlugin({
    template: '../template/sidebars.html',
    filename: '../../../templates/home/sidebars.html',
    imagePath:'http://static.test.koolink.com/www',
    xhtml:true,
    inject: false
})

模板html，sidebars.html的其中一段语法是这样的

<div class="visiter kl-container" th:fragment="visitors (maxShow)" th:if="${not #lists.isEmpty(visitors)}">
    <div class="side-title">
        <span class="fb">谁看过我</span>
    </div>
    <div class="list">
        <div class="user" th:each="visit, vStat : ${visitors}" th:unless="${vStat.index > maxShow}">
            <a href="#" target="_blank" kl:profile="${visit.visitor}" kl:homepage="@{/}">
                <img class="sider-avatar" src="/images/avatar.png" th:if="${not #strings.isEmpty(visit.visitor.link)}"
                     kl:thumbnail="sqr72" th:src="@{${visit.visitor.link}}" th:alt="${visit.visitor.name + 'Logo'}"/>
                <img class="sider-avatar" src="/images/avatar.png" th:if="${#strings.isEmpty(visit.visitor.link)}"
                     th:alt="${visit.visitor.name + 'Logo'}"/>
                <div class="name" >
                    <span class="name-text con-overflow" th:text="${visit.visitor.name}"></span>
                    <svg class="kl global-icon-verified" th:if="${visit.visitor.sign > 1}" aria-hidden="true">
                        <use xlink:href="#kl-certification"></use>
                    </svg>
                </div>
                <div class="info con-overflow" th:text="${visit.visitor.title}">CEO</div>
            </a>
        </div>
    </div>
</div>

报出来的错是这样的

Html Webpack Plugin:
  Error: Child compilation failed:
  Module build failed: SyntaxError: Unexpected token ILLEGAL
  
  - Function
  
  - lodash.js:14843 
    [js]/[lodash]/lodash.js:14843:16
  
  - lodash.js:494 apply
    [js]/[lodash]/lodash.js:494:27
  
  - lodash.js:15227 
    [js]/[lodash]/lodash.js:15227:16
  
  - lodash.js:496 apply
    [js]/[lodash]/lodash.js:496:27
  
  - lodash.js:6600 
    [js]/[lodash]/lodash.js:6600:16
  
  - lodash.js:14842 Function.template
    [js]/[lodash]/lodash.js:14842:20
  
  
  - SyntaxError: Unexpected token ILLEGAL
  
  - compiler.js:76 
    [js]/[html-webpack-plugin]/lib/compiler.js:76:16
  
  - Compiler.js:304 
    [js]/[webpack]/lib/Compiler.js:304:11
  
  - Compiler.js:520 
    [js]/[webpack]/lib/Compiler.js:520:14
  
  - Tapable.js:202 next
    [js]/[tapable]/lib/Tapable.js:202:11
  
  - CachePlugin.js:62 Compiler.
    [js]/[webpack]/lib/CachePlugin.js:62:5
  
  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [js]/[tapable]/lib/Tapable.js:206:13
  
  - Compiler.js:517 
    [js]/[webpack]/lib/Compiler.js:517:11
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [js]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:671 
    [js]/[webpack]/lib/Compilation.js:671:19
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [js]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:662 
    [js]/[webpack]/lib/Compilation.js:662:11
  
  - Tapable.js:202 next
    [js]/[tapable]/lib/Tapable.js:202:11
  
  - index.js:244 Compilation.
    [js]/[uglifyjs-webpack-plugin]/dist/index.js:244:6
  
  - Tapable.js:206 Compilation.applyPluginsAsyncSeries
    [js]/[tapable]/lib/Tapable.js:206:13
  
  - Compilation.js:657 
    [js]/[webpack]/lib/Compilation.js:657:10
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [js]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:653 sealPart2
    [js]/[webpack]/lib/Compilation.js:653:9
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [js]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:596 Compilation.seal
    [js]/[webpack]/lib/Compilation.js:596:8
  
  - Compiler.js:514 
    [js]/[webpack]/lib/Compiler.js:514:17
  
  - Tapable.js:289 
    [js]/[tapable]/lib/Tapable.js:289:11
  
  - Compilation.js:498 
    [js]/[webpack]/lib/Compilation.js:498:11
  
  - Compilation.js:468 
    [js]/[webpack]/lib/Compilation.js:468:14

请问有什么解决的办法

Answer 1

解决了，少了HTML－loader

Answer 2

模版需要定义相应的 loader，比如我使用 pug 模版

那么相应的需要使用 pug-loader

Answer 3

楼主解决了吗？我之前用的 vue-cli2.0 直接自己写一个webpack 插件，在 HtmlWebpackPlugin 执行完成以后，把一部分内容替换为那个模板。现在更新到 vue-cli3.0 。。