问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
hcxowe
    1.4k1415

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

    javascripthtmlnode.jswebpack
    阅读 3.6k
    1 个回答
    得票最新
    头像
    Thomas奇
      10116
      ✓ 已被采纳

      你既然已经用了 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")} 进行引用。这个写起来应该比你用 <%= ... %> 更简洁一些。

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