webpack插件:使用HtmlWebpackPlugin在页面中使用EJS语法引用模板文件(二)

上一篇中仅仅说了使用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>

猜你喜欢

转载自blog.csdn.net/connie_0217/article/details/79761321
今日推荐