猿问

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


鸿蒙传说
浏览 1657回答 1
1回答

慕标5832272

你既然已经用了&nbsp;html-loader&nbsp;了，实际上就不需要通过&nbsp;html-webpack-plugin&nbsp;的模板来渲染 html 了。在 webpack 里配置&nbsp;html-loader&nbsp;开启 interpolate 后，通过 ES6 字符串模板进行引用。webpack:{&nbsp;&nbsp;&nbsp;&nbsp;test:&nbsp;/\.html$/,&nbsp;&nbsp;&nbsp;&nbsp;use:&nbsp;[{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loader:&nbsp;"html-loader",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interpolate:&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}]}html:<!DOCTYPE&nbsp;html><html&nbsp;lang="en"><head> &nbsp;&nbsp;&nbsp;&nbsp;${require("./common.html")}</head>然后在 common.html 中，可以继续使用 ${require("xxx.html")} 进行引用。这个写起来应该比你用&nbsp;<%= ... %>&nbsp;更简洁一些。
0
随时随地看视频慕课网APP

相关分类

Node.js
我要回答