webpack plugin: use HtmlWebpackPlugin to reference template files in pages using EJS syntax (2)

In the previous article, I only mentioned the use of HtmlWebpackPlugin to process html templates. In fact, the plugin also supports the template syntax of EJS:

Then we can take the public html code of the html page into a component, and use the template to import when needed

How to do it?
If weboack cannot directly support such writing, it needs one html-loaderas an intermediary;

  • So the first step is to initialize the loader:
npn  install html-loader --save-dev
  • Let's talk about the basic syntax of EJS templates
<% require('html-loder!模板相对路径') %>

Note: If you don't write html-loder!it, there will be errors when packaging, because webpack needs to process such templates according to the loader

Previous demo:

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <% require('html-loader!./layout/header.html') %>

Guess you like