3 Ways to Define Webpack Loaders

Webpack loaders are executed opposite of how many expect (right-to-left when a string, bottom-to-top when an array) such that the final loader returns Javascript.

Once you get past that, the next implementation detail to contend with is writing query parameters to configure each loader, which can get unwieldy.

1. Ridiculous Query String With Bizarre Punctuation:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader:
          'style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded',
      },
    ],
  },
}

2. Array of Query Strings (But Aren’t URLs?)

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: [
          'style',
          'css',
          'autoprefixer?browsers=last 2 version',
          'sass?outputStyle=expanded',
        ],
      },
    ],
  },
}

3. Array of Specialized Loaders (But Less “DRY”):

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style',
      },
      {
        test: /\.scss$/,
        loader: 'css',
      },
      {
        test: /\.scss$/,
        loader: 'autoprefixer',
        query: { browsers: 'last 2 version' },
      },
      {
        test: /\.scss$/,
        loader: 'sass',
        query: { outputStyle: 'expanded' },
      },
    ],
  },
}

Personally, I prefer the final version as it’s easier to compose a chain of transformers and configure loaders with complex queries.