在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ html-webpack-plugin, 嵌套引入 html, 無法解析

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 內(nèi)容 -->
            <%= 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 來引入模塊在組裝, 不過這種方式實現(xiàn)不佳

回答
編輯回答
吢涼

你既然已經(jīng)用了 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 中，可以繼續(xù)使用 ${require("xxx.html")} 進行引用。這個寫起來應該比你用 <%= ... %> 更簡潔一些。

2017年10月1日 15:16