Привет Я пытаюсь настроить 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 не могут. Не знаю о других, и если тема заканчивается здесь.
Вы достигли этого для рулей в конце? Не возражаете поделиться своим решением? – emik