webpack4中使用tpl模板

ejs-loader

在webpack开发中，经常会在js中写html代码，不用模板引擎的话会非常不方便开发和维护，这时候使用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.tpl，直接写html

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

在js中引入tpl

var html = require('./html.tpl');

//拿到html
console.log(html())

/* 
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
*/

模板语言支持传参，和一些js语法

	<ul>
	    <li><%=a%></li>
	    <li><%=b%></li>
	</ul>

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

/* 
    <ul>
        <li>3</li>
        <li>4</li>
    </ul>
*/

具体使用可参考官网ejs