webpack使用视频-在webpack4中使用tpl模板

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

ejs加载器

在webpack开发中webpack使用视频，HTML代码往往是用js编写的。 如果没有模板引擎，开发和维护将会非常不方便。 这时候使用ejs-loader就会非常方便，开发效率也会提高。

什么是 EJS？

EJS 是一种简单的模板语言，可帮助您使用普通 JavaScript 代码生成 HTML 页面。 EJS 没有关于如何组织内容的教条； 它也没有重新发明一套迭代和控制流语法； 它所拥有的只是普通的 JavaScript 代码。

安装

开发环境安装，生产环境不需要

cnpm i ejs-loader --save-d

在 webpack.common.js 配置文件中添加

module: {
        rules: [
			//...省略
			{
                test: /.(tpl|ejs)$/,
                loader: 'ejs-loader'
            }
		]
 }       

在js中使用

文件中创建html.tplwebpack使用视频，直接写入html

	<ul>
	    <li>1</li>
	    <li>2</li>
	</ul>

js中引入tpl

var html = require('./html.tpl');
//拿到html
console.log(html())
/* 
    

        
1
        
2
        
3
        
4
    
*/

模板语言支持参数传递和一些js句型

	<ul>
	    <li></li>
	    <li></li>
	</ul>

var html = require('./html.tpl');
//拿到html片段
console.log(html({a:3,b:4}))
/* 
    

        
3
        
4
    
*/

具体使用请参考官网ejs