html-webpack-plugin, 嵌套引入 html, 无法解析

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 来引入模块在组装, 不过这种方式实现不佳

阅读 3.6k
1 个回答

你既然已经用了 html-loader 了,实际上就不需要通过 html-webpack-plugin 的模板来渲染 html 了。在 webpack 里配置 html-loader 开启 interpolate 后,通过 ES6 字符串模板进行引用。

webpack:

{
    test: /\.html$/,
    use: [{
        loader: "html-loader",
        options: {
            interpolate: true
        }
    }]
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    ${require("./common.html")}
</head>

然后在 common.html 中,可以继续使用 ${require("xxx.html")} 进行引用。这个写起来应该比你用 <%= ... %> 更简洁一些。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题