2016-10-26 8 views
0

Привет Я пытаюсь настроить Webpack для правильной обработки шаблонов (Усы или Руль). Все работает отлично с одним исключением: img src atributes в шаблонах не обрабатывается файловым загрузчиком. Возможно, я не понимаю что-то принципиальное в рабочем процессе, но я бы хотел, чтобы он работал так, как это разрешено в файлах css.Использование изображений в шаблонах с webpack

Вот мой WebPack конфигурации относительно погрузчиков:

loaders: [ 
     { 
      test: /\.js/, 
      loader: 'babel', 
      include: [__dirname + '/src', __dirname + '/tests'], 
      exclude: /node_modules/, 
      query: { 
       plugins: ['transform-runtime'], 
       presets: ['es2015'] 
       //presets: ['es2015-native-modules'] 
      } 
     }, 
     { 
      test: /\.scss/, 
      loader: 'style!css!postcss-loader!sass', 
      // Or 
      //loaders: ['style', 'css', 'sass'], 
     }, 
     { 
      test: /\.html/, 
      loader: 'html', 
     }, 
     { 
      test: /\.modernizrrc$/, 
      loader: "modernizr" 
     }, 
     { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      loader:'file-loader' 
     }, 
     { 
      test: /\.mustache$/i, 
      loader:'handlebars-loader' 
     }, 
    ], 

Вот пример шаблона:

<div style="border: solid 2px blue;"> 
<h2>Template fragment</h2> 
<p>{{text}}</p> 
<img id="img1" src="{{img}}" alt=""> 
<img id="img2" src="../img/btn_bubble.png" alt=""> 

Когда я загрузить шаблон из JS, я могу вставить IMG правильно в #img1, но #img2 остается нетронутым и, очевидно, не работает после включения.

EDIT

Похоже, это зависит от пакета шаблона загрузчика. Некоторые из них могут управлять изображениями, а некоторые нет. Например. с Handlebars кажется, что handlebars-template-loader can и handlebars-loader не могут. Не знаю о других, и если тема заканчивается здесь.

ответ

0

Я буду продвигать свое редактирование в ответ, потому что (к сожалению) это кажется правильным.

На этот вопрос не существует общего ответа на уровне Webpack, поэтому он зависит от пакета загрузчика шаблона. Некоторые из них могут управлять изображениями, а некоторые нет. Вы могли бы подумать, что было бы легко подключить загрузчики, чтобы обработать шаблон и изображения, но это не так просто - входы и выходы имеют тенденцию быть несовместимыми.

Я, например, должен был переключиться с Усы на рулевые, чтобы решить задачу, но ребята-усы-загрузчики, похоже, тоже работают над загрузкой изображения.

+0

Вы достигли этого для рулей в конце? Не возражаете поделиться своим решением? – emik

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