Webpack and Angular HTML image loading

Я ломаю голову с помощью webpack и углового. У этого может быть простой ответ, но я не могу понять это. Я прочитал почти каждый ответ здесь в переполнении стека по этой теме безрезультатно.Webpack and Angular HTML image loading

У меня есть HTML-страницы, как это (и другой шаблон, который есть изображения):

<body> 
    <img ng-src="../images/angular-webpack.png"> 

    <md-button class="md-primary md-raised"> 
     Button 
    </md-button> 
</body>

У меня также есть WebPack конфигурации:

var webpack = require('webpack'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    context: path.resolve(__dirname + '/src'), 
    entry: ['./js/core/app.module.js'], 
    output: { 
     path: './release', 
     publicPath:'/', 
     filename: 'app.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.html/, 
       exclude: 'node_modules', 
       loader: 'raw-loader' 
      }, 
      { 
       test: /\.css/, 
       exclude: 'node_modules', 
       loader: 'style-loader!css-loader' 
      }, 
      { 
       test: /\.(jpe?g|png)$/i, 
       exclude: 'node_modules', 
       loader: 'url-loader?limit=8192!img' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
       warnings: false 
      } 
     }), 
     new CopyWebpackPlugin([ 
      {from: './index.html', to: './index.html'} 
     ], { 
      ignore: [ 
       '*.txt', 
       {glob: '**/*', dot: true} 
      ] 
     }) 
    ], 
    devServer: { 
     contentBase: './release' 
    }, 
    watch: true 
};

... но я не вижу, что я загрузка изображений. Я пробовал загрузчик url-загрузчика, загрузчик файлов с publicPath и без него. Я смущен, я не знаю, как отформатировать конфигурацию webpack или тег html-образа, чтобы он работал.

У кого-нибудь есть опыт получения изображений для работы с веб-пакетом? Также я не хочу включать мои изображения в контроллеры или в любой другой файл js. Я хочу, чтобы изображения были объявлены на странице html.

источник

2016-02-15 btinoco

Предполагается, что raw-loader превратит текстовый файл в модуль CommonJS, который экспортирует содержимое файла в виде строки - ничего более.

Если вы хотите, чтобы webpack распознал файл как HTML и все его ссылки в нем, вам нужен html-loader. Html-загрузчик анализирует данный файл с помощью парсера HTML и берет ссылки на другие файлы в атрибутах. По умолчанию это только <img src="...">. В вашем случае, вы должны сказать html-loader также ищет ng-src атрибутов, например:

// webpack.config.js 

    ... 
    loaders: [{ 
     test: /\.html$/, 
     loaders: [ 
      "html?" + JSON.stringify({ 
       attrs: ["img:src", "img:ng-src"] 
      }) 
     ]} 
    ]

источник

2016-02-16 12:11:35

Когда я добавить свой код, я теперь вижу папку с именем изображения с изображениями внутри ... НО мое приложение делает не загружается, и он переходит в сумасшедший бесконечный цикл, пытаясь загрузить ресурс, и это заставляет компьютер кричать. :( – btinoco

Когда происходит бесконечный цикл? При компиляции? Или во время выполнения? Включена ли горячая замена модуля (HMR)? –

Это происходит во время выполнения. Это происходит с attrs или без. Также при использовании raw-loader или file Я создал второй небольшой проект, а некоторые изображения ниже предела в url-загрузчике. Изображения получают base64, но не отображаются. – btinoco

Webpack and Angular HTML image loading

ответ

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