difelice / ejs-loader

EJS (Underscore/LoDash Templates) loader for webpack
MIT License
158 stars 24 forks source link

Is webpack 5 supported? #54

Open StudioMaX opened 3 years ago

StudioMaX commented 3 years ago

This loader hasn't been updated since last year and doesn't seem to support webpack 5.

For example, I could not find a solution for my problem of using ejs-loader and html-loader at the same time. My current config with webpack 4 is something like:

{
    test: /\.ejs$/i,
    use: [
        {
            loader: 'ejs-loader',
            options: {
                variable: 'data',
            }
        },
        'extract-loader',
        'html-loader',
    ]
}

First, I process the ejs files through html-loader so that the webpack knows about static files (img src="/something.jpg", etc.). Then I pass output to extract-loader, which extracts the module back to html/ejs strings. Then the processed .ejs passed into ejs-loader.

html-loader >= 2.0 exports HTML as modules, added new URL syntax and uses parse5 for parsing ejs files. Next, extract-loader is not supported since May 2020 and is therefore not compatible with webpack 5. html-loader has an idea to add an option for similar functionality, this will partially solve the problem of extract-loader. But even after that, it will not be possible to use html-loader anymore, since now it checks html tags more strictly and it will not allow to use ejs templates as before.

A simple example of how it is used now (data comes from the backend):

<span>Hello, <%- data.username %></span>
<img src="/images/user.jpg">
import template from "templates/sample.ejs";

// process response from backend
let output = template({ username: response.username });

Therefore, the question is how to similarly use webpack 5 with compiled ejs templates, while pre-processing the source templates to process them to the webpack (which is what the html-loader is doing now). Developers of html-loader says that other loaders like ejs-loader should do this, and html-loader loader will only support correct html tags.

mizok commented 2 years ago

@StudioMaX You can try template-ejs-loader, it is a new loader which supports webpack 5. And you can also use it with html-loader and htmlWebpackPlugin. I am now using it in my project, it actually works fine !