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 activated by using loadername!
prefixes in require()
statements, or are automatically applied via regex from your webpack configuration – see configuration.
val-loader
Executes code as module and consider exports as JS coderef-loader
Create dependencies between any files manuallycson-loader
Loads and transpiles a CSON filebabel-loader
Loads ES2015+ code and transpiles to ES5 using Babelesbuild-loader
Loads ES2015+ code and transpiles to ES6+ using esbuildbuble-loader
Loads ES2015+ code and transpiles to ES5 using Bublétraceur-loader
Loads ES2015+ code and transpiles to ES5 using Traceurts-loader
Loads TypeScript 2.0+ like JavaScriptcoffee-loader
Loads CoffeeScript like JavaScriptfengari-loader
Loads Lua code using fengarielm-webpack-loader
Loads Elm like JavaScripthtml-loader
Exports HTML as string, require references to static resourcespug-loader
Loads Pug and Jade templates and returns a functionmarkdown-loader
Compiles Markdown to HTMLreact-markdown-loader
Compiles Markdown to a React Component using the markdown-parse parserposthtml-loader
Loads and transforms a HTML file using PostHTMLhandlebars-loader
Compiles Handlebars to HTMLmarkup-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 functionremark-loader
Load markdown through remark
with built-in image resolutionstyle-loader
Add exports of a module as style to DOMcss-loader
Loads CSS file with resolved imports and returns CSS codeless-loader
Loads and compiles a LESS filesass-loader
Loads and compiles a SASS/SCSS filepostcss-loader
Loads and transforms a CSS/SSS file using PostCSSstylus-loader
Loads and compiles a Stylus filevue-loader
Loads and compiles Vue Componentsangular2-template-loader
Loads and compiles Angular ComponentsFor more third-party loaders, see the list from awesome-webpack.
You are reading the documentation for webpack 5, the latest release. Read the webpack 4 documentation here. See the migration guide for upgrading to webpack 5.