Skip to content
This repository has been archived by the owner on Jun 17, 2024. It is now read-only.

Is webpack 5 supported? #54

Open
StudioMaX opened this issue Jun 4, 2021 · 1 comment
Open

Is webpack 5 supported? #54

StudioMaX opened this issue Jun 4, 2021 · 1 comment

Comments

@StudioMaX
Copy link

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
Copy link

mizok commented Jan 16, 2022

@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 !

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants