I’m working on a big and complex angularJs app, and i’m migrating it from Gulp to Webpack. I’m facing a problem that i couldn’t solve, basically i have some imports like “define([‘text!./Page.html’, ‘text!./style.css’], function(template, style) {…” and webpack doesn’t give me the template as a string. Instead, it gave me a Module.

HTML page as a Module

I already tried some approaches, like using “text-loader”, with resolveLoader alias, but it didn’t work.

HTML page with text-loader

In summary, i don’t want to change my code (removing the “text!” preffix and importing the template and css with “import … from …”), because its a big and complex app. What i need is somehow, tell webpack to give me these data, when it find the “text!” preffix, as a string, not a Module.

I prepared a small project, where you can simulate the problem descripted above: sample-project

To simulate the problem, just do

npx webpack

This will create the dist folder.

cd dist

http-server

Then, click on the first url on the CMD (127.0…). This will show you the webpack output on the right side. When you update the code, just delete de “dist” folder and then repeat the commands.

The final result should be the html page with the css aplied.

I’m stucked with this problem for few weeks now. If somebody could help me i would aprecciate a lot. Thanks.