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

Question

我使用 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 加载程序。我可以为此使用 NormalModuleReplacementPlugin，但它似乎修改了两个加载程序的路径。我也可以编写自己的加载程序来修改路径并调用 CSS 加载程序，但不知道如何在加载程序

中正确执行加载程序

Answer 1

This 回答帮我写了一个插件

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

无论如何，如果能够使用 loader 来完成它会很好。

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

Load multiple modules using single import

webpack

webpack-4