There is not yet an agreed convention on how JavaScript modules should reference or embed resource files. For example, if you want to reference a JSON file in your JavaScript code you would normally write something like this:

import fs from 'fs'; 
const text = fs.readFileSync(__dirname + './data.json', 'utf8'); 
const data = JSON.parase(text); 

There are two issues with this code. One is that the fs module is not isomorphic; you won't be able to run this code in a browser. Another issue is that this code is quite verbose.

Ideally, you want to write something like this instead:

import data from './data.json'; 

Webpack solves this problem through loaders. A loader is just a Node.js compatible JavaScript function, which accepts a source string (or object), manipulates the originally loaded content, and returns a JavaScript string or some arbitrary content object. It may also have side effects, for example, manipulating files on disk. Loaders can be chained; the...