Webpack динамически создает модуль

Я пишу плагин, который создает спрайт SVG. Он просматривает каталоги, объединяет SVG-файлы в одном изображении и возвращает результат. Идея состоит в том, чтобы динамически создавать модуль (содержащий объединенные изображения), чтобы другие модули могли требовать его как обычного модуля. Или, может быть, вы можете предложить более элегантное решение?Webpack динамически создает модуль

Config

{ 
    plugins: [ 
    new SvgSpritePlugin({ 
     sprites: { 
     icons: 'images/svg/icons/*.svg', 
     logos: 'images/svg/logos/*.svg', 
     socials: 'images/svg/logos/{twitter,youtube,facebook}.svg', 
     } 
    }) 
    ] 
}

Где-то в приложении

var logosSprite = require('sprite/logos'); // require dynamically created module 
document.body.appendChild(logoSprite);

источник

2015-07-29 kisenka

Я пытаюсь сделать подобное. Хотелось бы узнать, как ввести модуль из плагина. – 4m1r

Вы попробовали [webpack-svgstore-plugin] (https://github.com/lgordey/webpack-svgstore-plugin)? Похоже, он решает ту же проблему. – Kreozot

@Kreozot svgstore-plugin делает другую вещь - он выделяет активы во время компиляции webpack. Я хочу работать с svg, как с регулярными модулями, и строить только необходимые файлы. Я пишу [svg-sprite-loader] (http://github.com/kisenka/webpack-svg-sprite-loader) (высоко экспериментально). – kisenka

У меня есть несколько не столь элегантная solution.Combine все SVGs (по итерация папки) в один HTML и скрыть этот html-фрагмент с помощью display:none. Идентификаторы id как fileName и ucan затем получают к ним доступ по адресу getElementById(<yourID>).innerHTML. Образец Jsp на основе snippet..or записи в зависимости от того, язык, который вы хотите ..

<div id="hiddenSVGSprite" style="dispaly:none"> 
<i><span id="Download" ><%@include file="svg/Download.svg" %>/span>Download</i> 
<i><span id="DownloadFAQs" ><%@include file="svg/DownloadFAQs.svg" %> </span>DownloadFAQs</i> 
<i><span id="DownloadQuickReferenceGuide" ><%@include file="svg/DownloadQuickReferenceGuide.svg" %> </span>DownloadQuickReferenceGuide</i> 
<i><span id="DownloadUserManual" ><%@include file="svg/DownloadUserManual.svg" %> </span>DownloadUserManual</i> 
</div>

источник

2016-03-04 11:40:31

Я рекомендую взглянуть на этот плагин: https://github.com/rmarscher/virtual-module-webpack-plugin, который поможет вам создать виртуальный файл на лету, а затем вы могли бы включить этот файл в конфигурацию входа.

источник

2017-02-08 07:11:48

Попробуйте взглянуть на то, как внешние и делегированные модули предоставляются в Webpack. Хорошим местом для начала является ExternalModuleFactoryPlugin или DllReferencePlugin.

По существу, вы создаете плагин для NormalModuleFactory, который принимает запросы на модули, вы соответствуете тем, которые должны быть разрешены для модулей, которые вы генерируете, и вы можете асинхронно отвечать Module.

источник

2017-06-08 10:51:24

Webpack динамически создает модуль

ответ

Смежные вопросы