json: Loads file as JSON
hson: Loads HanSON file (JSON for Humans) as JSON object
raw: Loads raw content of a file (as utf-8)
to-string: Executes code as a module, casts output to a string and exports it
imports: Imports stuff to the module
exports: Exports stuff from the module
expose: Expose exports from a module to the global context
callback: Parses your JS, calls specified functions (which you implement in webpack context) and replaces them with the results
if-loader: This is a preprocesser for the webpack module bundler. It support the
if directive,similar to C
ifdef-loader: Preprocessor for .js/.ts files that allows conditional compilation via
, while preserving sourcemaps.
sourceMappingURL comments from modules and offer it to webpack
checksum: Computes the checksum of a file
null: Emits an empty module.
substitute: Emits a module whose content is substituted (default:
null, custom as parameter)
cowsay: Emits a module with a cowsay header.
dsv: Loads csv/tsv files.
glsl: Loads glsl files and support glsl-chunks.
glsl-template: Loads glsl shader files. Support #include directive and template variables.
render-placement: Adds React.render to your component for you (not very practical in most cases)
xml: Loads XML as JSON.
svg-react: Load SVG files as JSX-ified React.createClass declarations.
svg-url: Loads SVG file as utf-8 encoded data:URI string.
svg-as-symbol: Wraps content of root element of source SVG file inside
symbol element and returns resulting markup.
base64: Loads file content as base64 string.
base64-inline: Loader supports the most popular file extensions and can be injected directly into a file as base64 string.
ng-annotate: A loader to annotate dependency injections in
.node files that are produced using node-gyp.
required: Require a whole directory of trees in bulk. Require JS, Import CSS and imports stuff in it.
icons Generates iconfont from .svg files (uses gulp-iconfont)
markup-inline Inline SVGs to HTML. It’s very useful when applying icon font or applying CSS animation to SVG.
block-loader Generic loader for rewriting only parts of files, based on content start/end delimiters.
bundler-configuration Bundler configuration loader, a tool to include bundler configuration in the resulting build.
console: Prints the resolved require of webpack to the console.
solc: Compiles Solidity code (
web3: Deploys Ethereum VM bytecode and returns ready-to-use JS instances of deployed smart contracts. Also returns initialized Web3 object.
includes: Load any text file and support nested includes
combine: Combine results from multiple loaders into one object
regexp-replace: Replace RegExp matches with a string
icon-maker: Load SVG and bundle it to font and css, returns the class string to use that icon.
skeleton: Execute your custom procedure. It works as your custom loader.
file: Emits the file into the output folder and returns the (relative) url.
url: The url loader works like the file loader, but can return a Data Url if the file is smaller than a limit.
extract: Prepares HTML and CSS modules to be extracted into a separate file (lean alternative to the ExtractTextWebpackPlugin).
worker: The worker loader creates a WebWorker for the provided file. The bundling of dependencies of the Worker is transparent.
shared-worker: Like the worker loader, but for Shared Workers.
serviceworker: Like the worker loader, but designed for Service Workers.
bundle: Wraps request in a
require.ensure block (callback)
promise: Wraps request in a
require.ensure block (promise)
async-module: Same as
bundle, but provides a way to handle script loading errors. Wraps request in a
require.ensure block (callback, errback)
react-proxy: Code Splitting for react components.
react-hot: Allows to live-edit React components while keeping them mounted and preserving their state.
image: Compresses your images. Ideal to use together with
img: Load and compress images with imagemin.
image-maxsize: resize images to fit maximum width/height dimensions while retaining their aspect ratio.
base64-image: Load image as base64 string src
imgin: Generate placeholder images with different size, colors, text and font size.
responsive: Create multiple resized images for use with
srcset and CSS media queries
svgo: Compresses SVG images using svgo library
svg-sprite: Like style-loader but for SVG: it creates a single SVG sprite from a set of images, appends it to DOM and returns relative
symbol url to be used with svg’s
svg-fill: Changes colors in SVG images. Useful when you embed SVG in CSS as background image and don’t want to produce tons of identical files which only differ in their
line-art: Inlines SVG files, converting all of its nodes to paths. Useful for line art animations in React components.
baggage: Automatically require any resources related to the required one
polymer: Process HTML & CSS with preprocessor of choice and
require() Web Components like first-class modules.
uglify: Uglify contents of a module. Unlike uglify plugin you can minify with mangling only your application files and not the libraries
html-minify: Minifies HTML using minimize
vue: Load single-file Vue.js components as modules, with loader-support for preprocessors.
tojson Serialize module exports as JSON. Cache generated static data as JSON at build time.
zip-it Convert files and directories to zip. Great with
lzstring Compresses large strings inline using lz-string, and decompresses them at runtime
modernizr Get your modernizr build bundled with webpack
s3 Pull assets from s3 based on filename, path, and desired environment.
path-replace Replace a given base path with another path for dynamic module loading
react-intl Loads react-intl locale data via
font-subset: Loads a transformed font resource that contains only a specified subset of glyphs with all other glyphs stripped out.
w3c-manifest: Loads a WebApp manifest.json file.
web-app-manifest: Load images referenced in the icons and splash_screens fields in a Web App Manifest.
manifest-scope: Sets the scope of a web app manifest to the public path.
less-vars: Extracts variables from a given less file and returns it as JSON.
promise-loader, but simpler. Wraps request in a
require.ensure block (promise).
web-components: Makes it incredibly easy to import a multi-file Web Component into your project.
htmlclean: Simple and safety HTML/SVG cleaner to minify without changing its structure.
json5: Like json, but not so strict.
es6: Loads ES6 modules. (old)
esnext: Transpile ES6 code using esnext.
babel: Turn ES6 code into vanilla ES5 using Babel.
regenerator: Use ES6 generators via Facebook’s Regenerator module.
sweetjs: Use sweetjs macros.
json-files-merge: Loads and merges JSON files for inclusion in bundles (useful JSON-based i18n/config merging)
html: Exports HTML as string, require references to static resources.
dom: Exports HTML in a DOM element container.
pug: Loads Pug/Jade template and returns a function
jade-html: Loads Jade template and returns generated HTML
jade-react: Uses Jade templates for React rendering instead of JSX
virtual-jade: Use Jade templates to produce
virtual-dom hyperscript output
template-html: Loads any template with consolidate.js and returns generated HTML
handlebars: Loads handlebars template and returns a function
handlebars-template-loader: Loads handlebars template and returns a function (alternative)
dust: Loads dust template and returns a function
ractive: Pre-compiles Ractive templates for interactive DOM manipulation
jsx: Transform jsx code for React to js code.
react-templates: Loads react-template and returns a function
em: Compiles Emblem to Handlebars.js
ejs: Loads EJS (underscore( templating engine) template and returns a pre-compiled function
ejs-html: Loads EJS templates and returns generated HTML.
mustache: Pre-compiles Mustache templates with Hogan.js and returns a function
yaml: Converts YAML to JSON
react-markdown: Compiles Markdown to a React Component using the markdown-parse parser
front-matter: Extracts YAML frontmatter
markdown: Compiles Markdown to HTML
rails-erb: Compiles ERB files using Ruby on Rails
remarkable: Compiles Markdown to HTML using the Remarkable parser
markdown-it: Compiles Markdown to HTML using the markdown-it parser
markdownattrs: Compiles Markdown to HTML using the markdown-it-attrs parser that allows you to set classes, identifiers and attributes to your markdown.
ng-cache: Puts HTML partials in the Angular’s $templateCache
ngtemplate: Bundles your AngularJS templates and Pre-loads the template cache.
hamlc: Compiles haml-coffee templates (.hamlc) and returns a function.
haml: Renders haml-coffee templates (.html.hamlc) and returns a string.
jinja: Precompiles nunjucks and jinja2 templates
nunjucks: Precompiles nunjucks templates
soy: Compiles Google Closure templates and returns the namespace with render functions
smarty: Pre-compiles php smarty templates and returns a function
swagger: Compiles Swagger/OpenAPI JSON and YAML specifications.
template-string: Use ES6 template strings for html templates
ect: Compile ectjs templates
tmodjs: Load art-template , a template-engine that is widely used in China.
layout: You can use require directly in html now!
swig: Webpack Swig loader
twig: Webpack Twig.js loader
mjml-with-images: Compiles MJML files with images to responsive email HTML.
webcomponents: Loads html webcomponents with some additional features.
bootstrap-webpack: Loads a configuration file for Twitter Bootstrap integration using Less. Allows complete customisation via Less.
font-awesome-webpack: Loads a configuration file for Font Awesome integration using Less. Allows complete customisation via Less.
bootstrap-sass: Deprecated. See
bootstrap: Loads a configuration file for Twitter Bootstrap integration using Sass. Allows complete customization via Sass. Supports CSS modules and both Bootstrap 3 and 4.
font-awesome: Easy integration of font-awesome with customization via Sass.
style: Add exports of a module as style to DOM
isomorphic-style: Ad-hoc replacement to
style-loader adding support of isomorphic apps and critical path CSS
css: Loads css file with resolved imports and returns css code
cess: Loads and compile cess file (css in es6 js) to css
less: Loads and compiles a less file
sass: Loads and compiles a scss file
stylus: Loads and compiles a stylus file
csso: Minifies input CSS with CSSO
rework: Post-process CSS with Rework and returns CSS code
postcss: Post-process CSS with Autoprefixer and other PostCSS plugins
autoprefixer: Add vendor prefixes to CSS rules using values from Can I Use
namespace-css: Namespace your css with a given selector (for encapsulating all rules in one subset of your site)
fontgen: Create your own webfont with proper CSS on-the-fly and include it into WebPack.
classnames: Automatically bind css-modules to classnames.
theo Loads Design Tokens files transformed by theo
bulma Customize Bulma in your css-modules.
css-to-string Convert the output of the
css-loader back to a string.
po: Loads a PO gettext file and returns JSON
po2mo: Compiles gettext PO files to MO files
format-message: Compiles translations to ICU Message Format strings in
jsxlate: Transform React source code for use with
.po files as
Angular.js module or
json to be used with
webpack-angular-translate: Extracts angular-translate translation id’s and default text’s
angular-gettext-extract Extracts strings for translation into a nominated
gettext: Compiles a Gettext PO file from code source.
preprocessor: The preprocessor-loader provides the ability to preprocess source files through user defined regular expressions, macros, and callback routines. All user defined logic can be applied to line scope or source scope.
amdi18n-loader: I18n loader similar to require.js i18n plugin. The language packs support AMD/CommonJS module and can be written in
properties: Loader for .properties files.
transifex: Fetch imported translation files from transifex.