style-loader - Style Loader

•    Javascript

---

When using local scoped CSS the module exports the generated identifiers (locals). It's also possible to add a URL <link href="path/to/file.css" rel="stylesheet"> instead of inlining the CSS {String} with <style></style> tag.

webpack-loader stylesheets

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

isomorphic-flux-boilerplate - ES7 Isomorphic Flux/ReactJS Boilerplate

•    Javascript

---

A wonderfull boilerplate for Flux/ReactJS universal applications, running on koajs. Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.

react flux alt iso isomorphic spa ssr koa webpack jsx es6 babel postcss precss eslint react-router react-transform-hmr react-transform hot-loader async server generator es7 i18n intl

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

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

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.

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

sass-resources-loader - SASS resources (e.g. variables, mixins etc.) loader for Webpack

•    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. Note, this loader is not limited to SASS resources. It supposedly works with less, post-css, etc. per issue 31.

css sass 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

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

react-css-components - Define React presentational components with CSS

•    Javascript

---

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

css-in-js react webpack css-modules react-dom css postcss postcss-plugin webpack-loader

isomorphic500 - A 500px app built with React and Fluxible with babeljs

•    Javascript

---

Isomorphic500 is a small isomorphic (universal) web application featuring photos from 500px. It is built on express using React and Flux with yahoo/fluxible. It is developed with webpack and react-hot-loader and written with babeljs with the help of eslint. It supports multiple languages using react-intl.

fluxible isomorphic react flux

postcss-loader - PostCSS loader for webpack

•    Javascript

---

You can read more about common PostCSS Config here.You can use different postcss.config.js files in different directories. Config lookup starts from path.dirname(file) and walks the file tree upwards until a config file is found.

css postcss postcss-runner webpack 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

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

symfony-react-sandbox - Example of integration with React and Webpack (Webpack Encore) for universal (isomorphic) React rendering, using Limenius/ReactBundle and Limenius/LiformBundle

•    Javascript

---

This sandbox provides an example of usage of ReactBundle with server and client-side React rendering (universal/isomorphical) and its integration with a fitting Webpack Encore setup. It also provides an example of the usage of LiformBundle to generate a json-schema from Symfony forms and a forms and validation in React from that schema. -Note: If you are new to React.js, please note that this sandbox or the bundle are not by any means required to use React with Symfony. This shocases how to do some advanced features such as Server Side Rendering, a better integration with forms, injecting components directly from Twig tags, that may be difficult.

symfony react webpack json-schema webpack-encore jsx reactjs server-side rendering isomorphic

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

react-proxy-loader - Wraps a react component in a proxy component to enable Code Splitting.

•    Javascript

---

Wraps a react component in a proxy component to enable Code Splitting, which loads a react component and its dependencies on demand. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

webpack-loader reactjs react webpack async hmr codesplitting

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

•    Javascript

---

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.

stylelint webpack lint linter node-sass plugin webpack-plugin

webpack-starter - ✨ A lightweight foundation for your next webpack based frontend project.

•    Javascript

---

A lightweight foundation for your next webpack based frontend project. When you run npm run build we use the mini-css-extract-plugin to move the css to a separate file and included in the head of your index.html, so that the styles are applied before any javascript gets loaded. We disabled this function for the dev version, because the loader doesn't support hot module replacement.

starter-kit boilerplate frontend webpack sass babel es6 startkit webdev