index.html
<div class="center-table-wrapper">
<%= require('html-loader!../components/systemMainTab/index.html') %>
</div>
systemMainTab/index.html
<div class="containerDY">
<div class="container-list">
<div class="container-table">
<table id="showTable" style="width:100%"></table>
</div>
<div class="container-pagination">
<!-- 无法引入html 内容 -->
<%= require('html-loader!../systemPagination/index.html') %>
</div>
</div>
<!-- <div class="container-dy">
</div> -->
</div>
systemPagination/index.html
<div class="system-pagination">
</div>
第一层 <%= require('html-loader!../components/systemMainTab/index.html') %>
能正常引入, 而systemMainTab/index.html
的 <%= require('html-loader!../systemPagination/index.html') %>
未能解析, 有什么方法能嵌套解析否?
一种方式是通过 js 来引入模块在组装, 不过这种方式实现不佳
你既然已经用了
html-loader
了,实际上就不需要通过html-webpack-plugin
的模板来渲染 html 了。在 webpack 里配置html-loader
开启 interpolate 后,通过 ES6 字符串模板进行引用。webpack:
html:
然后在 common.html 中,可以继续使用 ${require("xxx.html")} 进行引用。这个写起来应该比你用
<%= ... %>
更简洁一些。