上一篇中仅仅说了使用HtmlWebpackPlugin来处理html模板,其实该插件还支持EJS的模板语法:
那么我们就能把html页面的公用html代码拿出来成一个组件,需要的时候使用模板引入
具体怎么做呢?
如果weboack不能直接去支持这么写,需要一个html-loader
作为中介;
- 那么第一步需要先初始化这个loader:
npn install html-loader --save-dev
- 再说一下EJS模板的基本语法
<% require('html-loder!模板相对路径') %>
注意:如果不写html-loder!
,打包的时候会有错误的,因为webpack需要根据loader去处理这样的模板
上一个demo:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<% require('html-loader!./layout/header.html') %>
<body>
Login
</body>
</html>