webpack4 将html 模块化

前言

webpack处理组件中的模板文件有两种方式：
1.将模板文件当做一个字符串。比如html-loader：将HMTL模板文件当做一个string输出。
2.将模板文件当做一个已经编译好的模板函数。比如ejs-loader：将EJS模板文件当做一个函数输出。

html-loader 示例

1.安装依赖：

npm i -D html-loader

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

webpack4 将html 模块化

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

<div>hello world</div>

● 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 主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html页面模块化</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

5.webpack.config.js

module: {
    rules: [
        {
            test: /\.xml/,
            loader: 'html-loader'
        }
    ]
},

ejs-loader 示例

1.安装依赖：

npm i -D ejs-loader

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

webpack4 将html 模块化

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

<div>
    <%= msg %>
</div>

●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 主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html页面模块化</title>
</head>
<body>
<div id="app"></div>
<div id="app2"></div>
</body>
</html>

5.webpack.config.js

module: {
    rules: [
        {
            test: /\.xml/,
            loader: 'html-loader'
        },
        {
            test: /\.tpl/,
            loader: 'ejs-loader'
        }
    ]
},

参考文档: https://www.webpackjs.com/loa...

webpack4 将html 模块化

前言

html-loader 示例

ejs-loader 示例

相关推荐