是否可以为webpack中的加载程序分配别名?

用法:

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"
}


我知道这是使用文件扩展名的方式,并且可以成为不必要的实体。

我正在寻找一种解决方案,希望能够编写一个长加载程序,并且在require中使用时只能使用一个选项。

说,

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 )

最佳答案

是的,您可以在配置的resolveLoader部分中为加载程序使用别名,但是在一个别名中,您只能定义一个加载程序:

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]'
    }
},


因此您的代码将如下所示:

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

10-07 17:34