How does webpack loader work?

Question

Is it correct to think that loaders actually transform other types of code into javascript code? So a CSS-loader actually transforms CSS code into Javascript so that the JS file that imports CSS actually gets CSS transformed and then injected into that JS file when you webpack builds out your bundle?

Answer 1

This isn't true for all loaders. The idea behind Webpack loaders is to provide multiple ways to handle some resource or asset - whether that's a javascript module, a CSS stylesheet, or an image. The loader is responsible for parsing/processing the resource, which might do any of the following:

• Transpile it into another language (eg babel-loader)
• Copy the resource to a specified location and provide the new location as the imported value (eg file-loader)
• Ignore the resource entirely (eg ignore-loader)

One thing that makes webpack so powerful is that these loaders can find more dependent resources inside the resource they're processing, and hand off to other loaders. So it's plausible to import an HTML file within your javascript, and that HTML file could reference another javascript file, which could then be loaded too.