Webpack 使用单个导入加载多个模块

我使用Webpack加载SVG图标。大多数图标都有一些与之相关联的CSS。我想在单独的文件中保留每个图标的样式。所以，如果导入了图标，则需要一些方便的方法将其包含在CSS包中。 比如说

import arrowIcon from 'icons/arrow.svg'

必须：

1） 使用我的svg加载器加载“icons/arrow.svg”

2） 使用我的css加载器加载“icons/arrow.svg.css”

我的尝试

我可以使用

multi-loader

，但我不知道如何修改资源路径

arrow.svg

=>

arrow.css

将其传递给css-loader。我可以使用

NormalModuleReplacementPlugin

，但它似乎修改了两个加载程序的路径。 我还可以编写自己的加载器，修改路径并调用CSS加载器，但不知道如何在加载器内部正确执行加载器。答案帮助我编写了一个插件

const CommonJsRequireDependency = require("webpack/lib/dependencies/CommonJsRequireDependency");
const fs = require('fs');
const path = require('path');

function LinkedModulePlugin(options) {
    this.options = options;
}

LinkedModulePlugin.prototype.apply = function(compiler) {
    compiler.hooks.compilation.tap('LinkedModulePlugin', compilation => {
        compilation.hooks.succeedModule.tap('LinkedModulePlugin', module => {
            const { resource } = module;
            const { test, linkedModule } = this.options;
            if (test instanceof RegExp && test.test(resource) ||
                typeof test === 'function' && test(resource)) {
                const linkedModulePath = linkedModule(resource);

                if (fs.existsSync(linkedModulePath)) {
                    const relPath = path.relative(module.context, linkedModulePath);
                    module.dependencies.push(new CommonJsRequireDependency('./' + relPath, null))
                }
            }
        });
    });
};

module.exports = LinkedModulePlugin;

用法示例：

// Webpack config
const LinkedModuleWebpackPlugin = require('./path/to/linked-module-webpack-plugin');

// ...

plugins: [
    new LinkedModuleWebpackPlugin({
        test: /\.svg$/,
        linkedModule: (resource) => resource + '.css'
    })
]

无论如何，如果能够使用加载程序完成这项工作，那就太好了