Webpack4 与模板引擎

在开发原生JS插件，咱们常常不得不去繁琐的拼接字符串，影响研发效率。特别是在开发较复杂的公用插件时，需切换注入不一样的html，在原生拼接字符串层面，很利于后期维护。这是一份如何在webpack4中使用模板引擎的方案

咱们只在node编译环境使用模板引擎，编译完成的代码不会加大js大小。推荐使用Pug，和webpack的生态结合的更好(ejs得引入ejs，编译后js文件加大18kb)

Pug

配置

yarn add pug pug-loader --dev复制代码

{ 
	  test: /\.pug$/,
	  use: ['pug-loader']
 }复制代码

局部使用

//test.pug
ul
	each user in users
    	li=user复制代码

const template = require("./test.pug");
const locals = {
	users: [
	  "user1",
	  "user2",
	  "user3",
	  "user4",
	  "user5"
	]
  };
const str = template(locals);
console.log(str,'str')
document.querySelector("#root").innerHTML = template(locals);复制代码

EJS

配置

yarn add ejs ejs-loader --dev复制代码

{
        	test: /\.ejs$/, 
			loader: 'ejs-loader',
			query: {
            	variable: 'data',
            	interpolate: '\\{\\{(.+?)\\}\\}',
            	evaluate: '\\[\\[(.+?)\\]\\]'
        	}
  },复制代码

局部使用

//test.ejs
<h2><%= people.join(", "); %></h2>复制代码

const template = require('./test.ejs'); 
const ejs = require('ejs'),
people = ['geddy', 'neil', 'alex'];
const str = ejs.render(template(), {people: people});
console.log(str,template(),'str')复制代码

参考

• Webpack 4 write .pug templates
• ejs中文文档