lqip-loader - Low Quality Image Placeholders (LQIP) for Webpack

•    Javascript

---

PS: The large image file will be emitted & only 400byte of Base64 (if set to true in the loader options) will be bundled. To save memory and improve GPU performance, browsers (including Chrome started from 61.0.3163.38) will now render a slightly more crisp or pixelated Base64 encoded images.

webpack blurry images base64 image loader medium lazy load

url-loader - A loader for webpack which transforms files into base64 URIs

•    Javascript

---

A loader for webpack which transforms files into base64 URIs. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

webpack-loader webpack

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

•    Javascript

---

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

webpack webpack-loader loader css scss style styles style-loader react reactjs isomorphic universal critical-css critical-path-css

svg-inline-loader - Inline SVG loader with cleaning-up functionality

•    Javascript

---

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too. Simply add configuration object to module.loaders like this.

webpack-loader svg webpack react loader

sass-loader - Compiles Sass to CSS

•    HTML

---

Loads a Sass/SCSS file and compiles it to CSS. Use the css-loader or the raw-loader to turn it into a JS module and the mini-css-extract-plugin to extract it into a separate file. Looking for the webpack 1 loader? Check out the archive/webpack-1 branch.

webpack-loader sass libsass webpack loader

ts-loader - TypeScript loader for webpack

•    Javascript

---

This is the typescript loader for webpack. We have a number of example setups to accomodate different workflows. From "vanilla" ts-loader, to using ts-loader in combination with babel for transpilation, happypack or thread-loader for faster builds and fork-ts-checker-webpack-plugin for performing type checking in a separate process. Not forgetting Hot Module Replacement. Our examples can be found here.

typescript webpack-loader ts-loader typescript-loader webpack loader ts

Webpack - A bundler for javascript and friends

•    Javascript

---

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack module-bundler module-loader loaders plugins build-tool web web-performance compiler javascript-compiler webpack2 commonjs amd esm es6 javascript-modules

svg-react-loader - Webpack SVG to React Component Loader

•    Javascript

---

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones. The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

webpack loader react svg component

react-svg-loader - A loader for webpack, rollup, babel that loads svg as a React Component

•    Javascript

---

A loader for webpack, rollup, babel that loads svg as a React Component

react svgo svg webpack-loader babel-plugin svg-loader rollup-plugin loader react-svg-loader webpack

less-loader - Compiles Less to CSS

•    Javascript

---

A Less loader for webpack. Compiles Less to CSS. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

webpack-loader less webpack

vue-svg-loader - 🔨 webpack loader that lets you use SVG files as Vue components

•    Javascript

---

🔨 webpack loader that lets you use SVG files as Vue components

webpack-loader svg vue-components vue webpack nuxt vue-svg-loader svgo loader

resolve-url-loader - Webpack loader that resolves relative paths in url() statements based on the original source file

•    Javascript

---

A webpack loader that rewrites relative paths in url() statements based on the original source file. With webpack you can import a .scss file (or some other compile-to-css file) and have a loader take care of the transpilation. With Sass (at least) this file can include a whole tree of source files into a single output.

workerize-loader - 🏗️ Automatically move a module into a Web Worker (Webpack loader)

•    Javascript

---

A webpack loader that moves a module and its dependencies into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

webpack-loader webpack-plugin webpack worker web-worker loader thread workerize

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

•    Javascript

---

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

babel webpack loader css-modules css-loader

inject-loader - 💉👾 A Webpack loader for injecting code into modules via their dependencies.

•    Javascript

---

This is particularly useful for writing tests where mocking things inside your module-under-test is sometimes necessary before execution. inject-loader was inspired by, and builds upon ideas introduced in jauco/webpack-injectable.

webpack-loader loader webpack testing inject mock mocking

svg-sprite-loader - Webpack loader for creating SVG sprites.

•    Javascript

---

Webpack loader for creating SVG sprites. 🎉 2.0 is out, please read the migration guide & overview.

svg svg-sprite svg-stack webpack webpack2 webpack3 webpack-loader webpack-plugin sprite

elm-webpack-loader - Webpack loader for the Elm programming language.

•    Javascript

---

Webpack loader for the Elm programming language. It is aware of Elm dependencies and tracks them. This means that in --watch mode, if you require an Elm module from a Webpack entry point, not only will that .elm file be watched for changes, but any other Elm modules it imports will be watched for changes as well.

elm webpack loader

bootstrap-loader - Load Bootstrap styles and scripts in your Webpack bundle

•    Javascript

---

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

bootstrap-loader bootstrap-variables shakacode bootstrap-mixins bootstrap-styles webpack2 webpack-loader twitter-bootstrap webpack sass-loader bootstrap twitter

css-loader - CSS Loader

•    Javascript

---

The css-loader interprets @import and url() like import/require() and will resolve them. Good loaders for requiring your assets are the file-loader and the url-loader which you should specify in your config (see below).

webpack-loader css

svgr - Transform SVGs into React components 🦁

•    Javascript

---

Gold Sponsors are those who have pledged $200/month and more to SVGR.

svg2react svg-to-react svg svgo react react-svg react-svg-creator svg-react webpack-loader webpack inline-svg react-svg-loader loader react-native