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中文文檔