Use file-loader and html-loader together

webpack webpack-html-loader webpack-file-loader
Francesco Belladonna picture Francesco Belladonna · May 2, 2016 · Viewed 9.3k times · Source

I'm working on an angular application which requires html files to be extracted as plain HTML files and at same time should check for any <img src="..."> to require those images (as assets). In addition, images are based upon root path (so /images/something.png), they need to be resolved relatively to webpack context setting (the base path).

How can I achieve this? Can't get html-loader to play nicely with file-loader. Since the former outputs a JS file (with the require statements) and the latter expects a plain HTML file.

Answer

Francesco Belladonna picture Francesco Belladonna · May 3, 2016

I found the solution by myself by digging a lot into source codes of the loaders in question.

Basically, it doesn't work by default because file-loader expects a "raw" file, so if you want to output an HTML file, you need to have html source, not a JS one. However, html-loader takes an HTML file and outputs a JS file (with require assets and the content).

The solution was this deeply hidden and fantastic extract-loader which parses the JS coming out of html-loader, converts it back to plain html, the assets are still required and replaced even with hash for cachebusting.

That's perfect, you pass the output to file-loader and you finally have your html files!

Example configuration

In my case, my loader configuration looks like:

'file-loader!extract-loader!html-loader' + '?root=' + encodeURIComponent(sourcePath.toString())

Related questions

How can I provide parameters for webpack html-loader interpolation?

In the html-loader documentation there is this example require("html?interpolate=require!./file.ftl"); <#list list as list> <a href="${list.href!}" />${list.name}</a> </#list> <img src="${require(`./images/gallery.…

Read More
Use HTMLWebpackPlugin with an EJS file

I want to use the HTMLWebpackPlugin to take my index.ejs template file, insert my bundled assets, and output a final index.ejs file. This example has a EJS variable <%= API_URL %>, but webpack is interpreting it. How …

Read More
Getting Unexpected Token Export

I am trying to run some ES6 code in my project but I am getting an unexpected token export error. export class MyClass { constructor() { console.log("es6"); } }

Read More