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') %>
<body>
Login
</body>
</html>