Webpack enables use ofloaders 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 usingloadername! prefixes inrequire() statements, or are automatically applied via regex from your webpack configuration – seeconfiguration.

Files

• val-loader Executes code as module and consider exports as JS code
• ref-loader Create dependencies between any files manually

JSON

• cson-loader Loads and transpiles aCSON file

Transpiling

• babel-loader Loads ES2015+ code and transpiles to ES5 usingBabel
• esbuild-loader Loads ES2015+ code and transpiles to ES6+ usingesbuild
• buble-loader Loads ES2015+ code and transpiles to ES5 usingBublé
• traceur-loader Loads ES2015+ code and transpiles to ES5 usingTraceur
• ts-loader LoadsTypeScript 2.0+ like JavaScript
• coffee-loader LoadsCoffeeScript like JavaScript
• fengari-loader Loads Lua code usingfengari
• elm-webpack-loader LoadsElm 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 usingPostHTML
• 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 throughremark 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
• 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 usingPostCSS
• stylus-loader Loads and compiles a Stylus file

Frameworks

• vue-loader Loads and compilesVue Components
• angular2-template-loader Loads and compilesAngular Components

Awesome

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

9 Contributors