Why does Webpack Encore only load the filename and not its content (require().default)?

Question

webpack

The JS file has something like this:

const icon = require('path-to.svg').default;
div.innerHTML = icon;

When I collect my assets using regular Webpack 5.6.0 and loader: {test: /\.(svg)$/, loader: 'raw-loader'} I get a normal result: If I collect the same script with Webpack Encore (with and without the same loadrea), the result is different: Just the file name, not its content! How can I achieve the same behavior as with regular Webpack when building with Encor, so that it loads the contents of the file for me, and not its name?

<div><svg>...</svg></div>


<div>path-to.svg</div>

Answer 1

He asked himself - he answered.
You just need to install via npm/yarn raw-loader (if not already installed) and add to the path of the require file:

const icon = require('!raw-loader!path-to.svg').default;

Answer 2

If you use some special loader in Webpack, then why do you expect Webpack Encore to somehow magically use it too?
A simple check of the list of dependencies will show you what raw-loaderis not included in the list of dependencies, which means from the point of view of Webpack Encore, as well as from the point of view of Webpack (where it is only in dev.dependency) it is a custom loader, which clearly should have led you to corresponding section of the documentation .