Загрузка нескольких модулей с использованием одного импорта - PullRequest
Новая
       8

Загрузка нескольких модулей с использованием одного импорта

0 голосов
/ 18 июня 2019

Я использую Webpack для загрузки иконок SVG. С большинством иконок связан CSS. Я хотел бы сохранить стили для каждого значка в отдельном файле. Поэтому нужен какой-то удобный способ включить его в пакет CSS, если значок импортирован. Например 

import arrowIcon from 'icons/arrow.svg'

должен:

1) загрузить 'icons / arrow.svg', используя мой загрузчик SVG

2) загрузить 'icons / arrow.svg.css', используя мой загрузчик CSS

Мои попытки

Я мог бы использовать для этого multi-loader, но я не знаю, как изменить путь к ресурсу arrow.svg => arrow.css, чтобы передать его загрузчику CSS. Я мог бы использовать NormalModuleReplacementPlugin для этого, но, похоже, он изменяет путь для обоих загрузчиков. Также я мог бы написать свой собственный загрузчик, который изменяет путь и вызывает загрузчик CSS, но не знаю, как правильно запустить загрузчик внутри загрузчика

1 Ответ

0 голосов
/ 28 июня 2019

Этот ответ помог мне написать плагин 

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 .

...