• Stars
    star
    105
  • Rank 328,196 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Combine an array of webpack loaders into a loader string

webpack-combine-loaders

Converts an array of loaders defined using the {loader, query} object syntax into a single loader string. Useful for dealing with plugins which only understand the loader string syntax.

combineLoaders([
  {
    loader: 'css-loader',
    query: {
      modules: true,
      sourceMap: true,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
  {
    loader: 'sass-loader',
    query: {
      sourceMap: true,
      includePaths: [
        'app/assets/stylesheets',
        'app/assets/stylesheets/legacy',
      ],
    },
  },
]);
// => 'css-loader?modules=true&sourceMap=true&localIdentName=[name]__[local]--[hash:base64:5]!sass-loader?sourceMap=true&includePaths[]=app/assets/stylesheets&includePaths[]=app/assets/stylesheets/legacy'

why?

Say you have multiple loaders being applied to the same file format, and you are using the object syntax for specifying the loader query params (because it's more composable than the string form), but then you need to pass them to a plugin which only understands loaders in their string form (ExtractTextPlugin, I'm looking at you)...

[
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: 'css-loader',
    query: {
      modules: true,
      sourceMap: devBuild,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
      loader: 'sass-loader',
      query: {
        sourceMap: devBuild,
        includePaths: [
          path.resolve('app/assets/stylesheets'),
          path.resolve('app/assets/stylesheets/legacy'),
        ],
      },
    },
  }
]

Instead, make a combined loader like so:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  // multiple css loaders are combined into one because ExtractTextPlugin 
  // only understands loaders in string form :(
  loader: combineLoaders([
    {
      loader: 'css-loader',
      query: {
        modules: true,
        sourceMap: devBuild,
        localIdentName: '[name]__[local]--[hash:base64:5]',
      },
    },
    {
      loader: 'sass-loader',
      query: {
        sourceMap: devBuild,
        includePaths: [
          path.resolve('app/assets/stylesheets'),
          path.resolve('app/assets/stylesheets/legacy'),
        ],
      },
    },
  ]),
}

Changelog

  • 2.0.4 - Upgrade qs dependency (#10). Drops support for Node < 4.
  • 2.0.3 - add support for webpack2 loader "options" (with fallback to "query")
  • 2.0.0 - no longer uri-encodes loader params
  • 1.0.0 - initial release

More Repositories

1

react-native-htmlview

A React Native component which renders HTML content as native views
JavaScript
2,710
star
2

react-native-refreshable-listview

Deprecated. A pull-to-refresh ListView which shows a loading spinner while your data reloads
JavaScript
1,384
star
3

little-virtual-computer

Learn how computers work by simulating them in Javascript
JavaScript
854
star
4

pce

Emulates Mac Plus, PC, & Atari ST in the browser using WebAssembly
C
829
star
5

coffee-react-transform

DEPRECATED – Provides React JSX support for Coffeescript
CoffeeScript
433
star
6

coffee-react

DEPRECATED – Unfancy JavaScript with React JSX markup
CoffeeScript
413
star
7

ReactNativeHackerNews

React Native Hacker News app
JavaScript
256
star
8

browserify-incremental

incremental rebuild for browserify
JavaScript
175
star
9

react-ratchet

React components for the Ratchet mobile app UI library
JavaScript
86
star
10

sprockets-coffee-react

DEPRECATED – Sprockets preprocessor for CJSX (Coffeescript with React JSX markup)
Ruby
85
star
11

react-layout

Dynamic subview layout for React
CoffeeScript
83
star
12

goose64

untitled goose game demake for nintendo 64
C++
78
star
13

n64-sdk-demo

n64 homebrew demo app
Objective-C
66
star
14

github-reason-react-tutorial

OCaml
39
star
15

react-commits-graph

react component to render an svg graph of git commits
CoffeeScript
37
star
16

react-form-for

An expressive and intuitive form builder for React in the style of Rails' form_for
JavaScript
37
star
17

deep-freeze

recursively Object.freeze() on objects and functions
JavaScript
32
star
18

hacker-news-mobile

Hacker News mobile web app built in 'Isomorphic' React
JavaScript
27
star
19

lisp.rs

Scheme Interpreter in Rust
Rust
25
star
20

ed64log

printf() and error stacktraces for n64 sdk-based homebrew games running on everdrive64 flashcarts
C
19
star
21

only-if-changed-webpack-plugin

Webpack plugin to only run build if dependent files have changed
JavaScript
18
star
22

flux-coffee

Implements Facebook's Flux pattern in CoffeeScript
CoffeeScript
16
star
23

lisp.re

A LISP interpreter written in ReasonML, targeting native and browser environments
OCaml
16
star
24

inspect-react-element

Prettyprints ReactElements and their children
JavaScript
16
star
25

reason-routing-tutorial

A tutorial for routing in Reason React
JavaScript
15
star
26

applescript-raytracer

a raytracer written in applescript
AppleScript
14
star
27

hacker-news-mobile-api

Turns official Hacker News Firebase API into a REST JSON API
JavaScript
14
star
28

duktape64

javascript on nintendo 64
C
12
star
29

cjsx-codemod

A codemod for migrating off of coffee-react CJSX
JavaScript
11
star
30

strictify

browserify v2 plugin for enforcing strict mode
JavaScript
11
star
31

BussIK-js

Selectively Damped Least Squares for Inverse Kinematics, in JavaScript
JavaScript
11
star
32

find-index

finds an item in an array matching a predicate function, and returns its index
JavaScript
11
star
33

n64soundtools

tools for compiling sound and music data for n64 sdk homebrew games
JavaScript
11
star
34

hacker-news-serverless-api

A hacker news API published as JSON files on S3 by an AWS Lambda function
JavaScript
10
star
35

loader64

USB uploader tool for Everdrive64
C
10
star
36

browserify-cache-api

JavaScript
10
star
37

webpack_rails

DEPRECATED – Integrates Webpack with Rails/Sprockets
Ruby
9
star
38

traceviewer

simple traceviewer renderer
JavaScript
7
star
39

webserial-ed64log

connect to an everdrive 64 from your web browser
JavaScript
6
star
40

oky

An okayish framework for mobile apps with Backbone.
JavaScript
6
star
41

they-live

serverless server monitoring with near-zero running costs
JavaScript
5
star
42

perv

A tool to watch your filesystem and display logged activity via a web interface. Originally created to assist with time tracking.
JavaScript
5
star
43

nvm_auto

automatically `nvm use` when entering a directory with an .nvmrc
Shell
5
star
44

robot-control

3d web ui to simulate and control a robotic arm
JavaScript
4
star
45

cached-loader

DEPRECATED. Adds persistent on-disk caching to webpack loaders
JavaScript
4
star
46

n64-gameoflife

conway's game of life on n64
C
4
star
47

theunarchiver

Automatically exported from code.google.com/p/theunarchiver
C
4
star
48

jamesfriend.com.au

my website
JavaScript
3
star
49

jest-alias-module-loader

JavaScript
3
star
50

rinsefm-feed

Generates iTunes-compatible podcast feeds of Rinse FM via scraping
CoffeeScript
3
star
51

pcejs-embed

easily embed a pcejs emulator anywhere
JavaScript
3
star
52

cosmos

reactjs based cms
CoffeeScript
3
star
53

podcastgen

generate itunes-compatible podcasts from cson or json
CoffeeScript
3
star
54

ruby_node_task

Run node.js scripts from Ruby with a persistent worker
Ruby
3
star
55

bit-packing-explorer

play around with storing multiple pieces of data in a single number value using bit packing
JavaScript
2
star
56

css-modules-loader-core-sync

synchronous version of css-modules-loader-core
JavaScript
2
star
57

minivmac

Browser port of Mini vMac classic mac emulator (and repo mirror)
C
2
star
58

exif2csv

Mac app for dumping image EXIF data to a CSV
Python
2
star
59

aiff-explorer

visualize the contents of an AIFF file
JavaScript
2
star
60

bantam

super lightweight python game engine
Python
1
star
61

fridgemagnets

Realtime alphabet fridgemagnets node.js/browser demo
JavaScript
1
star
62

jspace

space shooter written with only built-in java stuff
Java
1
star
63

spaaaace

love2d game
Lua
1
star
64

scaletoy

chord palette with webmidi output
TypeScript
1
star
65

ReasonPhysics

simple physics simulation for reasonml
OCaml
1
star
66

webaudio

JavaScript
1
star
67

jsdf

github pages
1
star
68

melb-react-animation-talk

JavaScript
1
star
69

robot-arm

robot arm based on the Adafruit PCA9685 board
Python
1
star
70

planetarium

a beat-synced music visualization which controls rgb led strips via bluetooth
JavaScript
1
star