Loaders

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.

Files

  • raw-loader Loads raw content of a file (utf-8)
  • val-loader Executes code as module and consider exports as JS code
  • url-loader Works like the file loader, but can return a data URL if the file is smaller than a limit
  • file-loader Emits the file into the output folder and returns the (relative) URL

JSON

Transpiling

Templating

  • html-loader Exports HTML as string, require references to static resources
  • pug-loader Loads Pug templates and returns a function
  • jade-loader Loads Jade templates and returns a function
  • markdown-loader Compiles Markdown to HTML
  • 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.

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
  • stylus-loader Loads and compiles a Stylus file
  • postcss-loader Loads and transforms a CSS/SSS file using PostCSS

Linting && Testing

Frameworks

  • vue-loader Loads and compiles Vue Components
  • polymer-loader Process HTML & CSS with preprocessor of choice and require() Web Components like first-class modules
  • angular2-template-loader Loads and compiles Angular Components

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


Contributors