CODEWITHSUNDEEP
javascriptwebpack
Boopathi Rajaa
Boopathi Rajaa

Reputation: 4729

Aliases for loaders in webpack

Is it possible to assign aliases for loaders in webpack ?

Usage:

image: function(opts) {
  return "image-size?name=[name]-[hash:8].[ext]"
}
css: function(opts) {
  return "style?singleton!css?sourceMap&module&localIdentName=[path][name]_[local]_[hash:base64:6]!postcss"
}

I get that this is how to file extensions are used, and can become an unnecessary entity.

I'm looking for a solution where I want to be able to write a long loader and have only one option to be used when using in require.

say,

require('./file1.png?size=10')
require('./file2.png?size=15')

// at one place require it as component
// passing through a set of loaders
var Component = require('react-svg!./image.svg')
// and in another require it as data-uri
// passing through a different set of loaders
var imagestr = require('data-uri!./image.svg')
// and in css
url( image!./image.svg )

Upvotes: 2

Views: 875

Answers (1)

Kreozot
Kreozot

Reputation: 1576

Yes, you can use aliases for loaders in resolveLoader section in your config, but in one alias you can define only one loader:

resolveLoader: {
    alias: {
        'my-image': 'image-size?name=[name]-[hash:8].[ext]',
        'my-style': 'style?singleton',
        'my-css': 'css?sourceMap&module&localIdentName=[path][name]_[local]_[hash:base64:6]'
    }
},

so your code will be like this:

require('my-image!./image.svg');
require('my-style!my-css!postcss!./style.css');

Upvotes: 4

Related Questions