Webpack y carga de imagen HTML angular
Me he estado rompiendo la cabeza con webpack y angular. Esto podría tener una respuesta simple pero no puedo entenderlo. He leído casi todas las respuestas aquí en desbordamiento de pila sobre este tema en vano.
Tengo una página html como esta (también otra plantilla que tiene imágenes):
<body>
<img ng-src="../images/angular-webpack.png">
<md-button class="md-primary md-raised">
Button
</md-button>
</body>
También tengo una configuración de paquete web:
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
};
... pero no veo mis imágenes cargando. He intentado url-loader, file-loader con publicPath y sin él. Estoy confundido, no sé cómo formatear la configuración del paquete web o la etiqueta de imagen html para que funcione.
¿Alguien tiene experiencia en hacer que las imágenes funcionen con webpack? Además, no quiero incluir mis imágenes en los controladores ni en ningún otro archivo js. Quiero que las imágenes se declaren en la página html.