Webpack und Angular HTML image loading

Question

Feb 15, 2016, 03:44 AM

Webpack und Angular HTML image loading

Ich habe mir mit Webpack und eckigem Kopf den Kopf gebrochen. Dies könnte eine einfache Antwort haben, aber ich kann es nicht herausfinden. Ich habe fast jede Antwort hier im Stapelüberlauf zu diesem Thema ohne Erfolg gelesen.

Ich habe eine HTML-Seite wie diese (auch eine andere Vorlage mit Bildern):

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

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

Ich habe auch eine Webpack-Konfiguration:

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
};

... aber ich sehe nicht, dass meine Bilder geladen werden. Ich habe versucht, Url-Loader, File-Loader mit publicPath und ohne. Ich bin verwirrt und weiß nicht, wie ich die Webpack-Konfiguration oder das HTML-Image-Tag formatieren soll, damit es funktioniert.

Hat jemand Erfahrung damit, Bilder mit dem Webpack zum Laufen zu bringen? Außerdem möchte ich meine Bilder nicht in die Controller oder eine andere js-Datei aufnehmen. Ich möchte, dass die Bilder auf der HTML-Seite deklariert werden.