webpack - Webpack 不加载 png 图像

Question

我在 src 文件夹中有一些图像：

src/img/favicon.png
src/img/profpic.png

在 index.html 文件中，我将指出

    <link rel="shortcut icon" href="img/favicon.png" />

在一些 html 文件中，我将指出

    <img src="img/profpic.png" />

我正在尝试通过 webpack 加载图像、字体。下面是我的 webpack.config

module.exports = {
    context: path.resolve('src'),
    entry: {
        app: ["./index.ts"]
    },
    output: {
        path: path.resolve('build'),
        filename: "appBundle.js"
    },
    devServer: {
        contentBase: 'src'
    },
    watch: true,
    module: {
        preLoaders: [
            {
                test: /\.ts$/,
                loader: "tslint"
            }
        ],
        loaders: [
                    {test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']},
                    {
                        test: /\.css$/,
                        loader: 'style-loader!css-loader'
                    },
                    {
                        test: /\.scss$/,
                        loader: 'style!css!sass'
                    }, {
                        test: /\.html$/,
                        exclude: /node_modules/,
                        loader: 'raw'
                    }, {
                        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                        loader: 'url-loader?limit=1000000&mimetype=application/font-woff'
                    }, {
                        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                        loader: 'file-loader'
                    }, {
                        test: /\.json$/,
                        loader: "json-loader"
                    }, {
                        test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
                    }
                ];
    }
    plugins: [          
        new HtmlWebpackPlugin({
            template: './index.html',
            inject: 'body',
            hash: true
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.jquery': 'jquery'
        })
    ],
    resolve: {
        extensions: ['', '.js', '.es6', '.ts']
    }
}

尝试将图像/字体加载到 webpack 输出文件夹。它没有抛出任何错误。它成功构建但在构建中，这是我的 webpack 输出文件夹字体加载正常但图像未加载

Answer 1

将原始加载器更改为用于 html 的 html 加载器就可以了。以下是我的更改

{test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']},
{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
},
{
    test: /\.scss$/,
    loader: 'style!css!sass'
}, {
    **test: /\.html$/,
    exclude: /node_modules/,
    loader: 'html-loader'**
}, {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=1000000&mimetype=application/font-woff'
}, {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
}, {
    test: /\.json$/,
    loader: "json-loader"
}, {
    **test: /\.png$/, 
    exclude: /node_modules/,
    loader: 'file-loader?name=images/[name].[ext]'**
}