Webpack中加载程序的别名

Question

是否可以为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 )

Answer 1

是的，您可以在配置的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');