javascript - 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');