Loaders

Understanding Loaders

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or "load" them.

Transformation: Loaders can convert files from a different language (like TypeScript) to JavaScript.
Assets: They allow you to include resources like images or CSS directly in your JavaScript dependency graph.
Chaining: You can chain multiple loaders together (e.g., sass-loader -> css-loader -> style-loader).

Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js. Loaders are separate packages that extend webpack's capabilities and are maintained within the broader ecosystem. Loaders are activated by using loadername! prefixes in import .. from "mod";/require() statements, or are automatically applied via regex from your webpack configuration – see configuration.

Files

ref-loader Create dependencies between any files manually

JSON

cson-loader Loads and transpiles a CSON file

Transpiling

babel-loader Loads ES2015+ code and transpiles to ES5 using Babel
esbuild-loader Loads ES2015+ code and transpiles to ES6+ using esbuild
buble-loader Loads ES2015+ code and transpiles to ES5 using Bublé
traceur-loader Loads ES2015+ code and transpiles to ES5 using Traceur
ts-loader Loads TypeScript 2.0+ like JavaScript
coffee-loader Loads CoffeeScript like JavaScript
fengari-loader Loads Lua code using fengari
elm-webpack-loader Loads Elm like JavaScript

Templating

html-loader Exports HTML as string, require references to static resources
pug-loader Loads Pug and Jade templates and returns a function
markdown-loader Compiles Markdown to HTML
react-markdown-loader Compiles Markdown to a React Component using the markdown-parse parser
posthtml-loader Loads and transforms a HTML file using PostHTML
handlebars-loader Compiles Handlebars to HTML
markup-inline-loader Inline SVG/MathML files to HTML. It’s useful when applying icon font or applying CSS animation to SVG.
twig-loader Compiles Twig templates and returns a function
remark-loader Load markdown through remark with built-in image resolution

Styling

style-loader Add exports of a module as style to DOM
css-loader Loads CSS file with resolved imports and returns CSS code
css-utility-loader - Automatically parses and translates legacy CSS properties into modern utility classes (Tailwind) at build-time.
less-loader Loads and compiles a LESS file
sass-loader Loads and compiles a SASS/SCSS file
postcss-loader Loads and transforms a CSS/SSS file using PostCSS
stylus-loader Loads and compiles a Stylus file

Frameworks

vue-loader Loads and compiles Vue Components
angular2-template-loader Loads and compiles Angular Components

Awesome

For more third-party loaders, see the list from awesome-webpack.

Edit this page·

babel-loader