html模块化嵌套页面,webpack4 将html 模块化

前言

webpack处理组件中的模板文件有两种方式：

1.将模板文件当做一个字符串。比如html-loader：将HMTL模板文件当做一个string输出。

2.将模板文件当做一个已经编译好的模板函数。比如ejs-loader：将EJS模板文件当做一个函数输出。

html-loader 示例

1.安装依赖：

npm i -D html-loader

2.建立模板文件，目录为：

● layer.xml，后缀也可以是.html,.xml 等合法的后缀名，.xml 后缀是为了和根目录的index.html 区别开来，以便于以后对两种文件进行不同操作。就像vue 框架里的模板文件的后缀就是.vue 。

● layer.js，引入模板文件，将其加工成对象后输出

import tpl from './layer.xml'

function layer(){

return{

name:'layer',

tpl:tpl

}

}

export default layer;

3.index.js 主入口文件调用模板，并将其添加到页面中

import Layer from './components/layer/Layer'

const App=function(){

var dom=document.getElementById('app');

let layer=new Layer();

dom.innerHTML=layer.tpl;

}

new App();

4.index.html 主页面

5.webpack.config.js

module: {

rules: [

{

test: /\.xml/,

loader: 'html-loader'

}

]

},

ejs-loader 示例

1.安装依赖：

npm i -D ejs-loader

2.建立模板文件，目录为：

● ejs.tpl，模板文件的后缀也可以是.html,.xml,.ejs等合法的后缀名。ejs模板的语法还有许多，比如for 循环等，详情参考 https://ejs.bootcss.com/

●ejs.js，引入模板文件，将其加工成对象后输出

import tpl from './Ejs.tpl'

function Ejs(){

return{

name:'ejs',

tpl:tpl

}

}

export default Ejs;

3.index.js 主入口文件调用模板，并将其添加到页面中

import Layer from './components/layer/Layer'

import Ejs from './components/ejs/Ejs'

const App=function(){

var dom=document.getElementById('app');

let layer=new Layer();

dom.innerHTML=layer.tpl;

var dom2=document.getElementById('app2');

let ejs=new Ejs();

dom2.innerHTML=ejs.tpl({

msg:'Hello China'

});

}

new App();

因为ejs 的模板文件是个函数，所有ejs.tpl({key:value}) 可以向模板传参

4.index.html 主页面

5.webpack.config.js

module: {

rules: [

{

test: /\.xml/,

loader: 'html-loader'

},

{

test: /\.tpl/,

loader: 'ejs-loader'

}

]

},