Webpack 不加载 png 图像答案

【问题标题】：Webpack not loading png imagesWebpack 不加载 png 图像
【发布时间】：2023-03-27 00:30:02
【问题描述】：

我的 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 输出文件夹字体加载正常，但图像未加载

【问题讨论】：

你的 HTML 文件是如何传递给 webpack 的？将 HTML 文件提供给 webpack 时，您需要使用 html-loader。
@jhnns appbundle.js 中的所有内容，将在 index.html 中加载
尝试发布您的应用程序的最小演示，您可以在其中尝试加载带有图像的 HTML。删除所有其他内容，有人可以回答您的问题。
是的，更多信息会很有用。根据目前的信息，很难说具体的。
@JuhoVepsäläinen 已更新。请看一下

标签： webpack loader webpack-file-loader

【解决方案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]'**
}

【讨论】：

为什么有时test有时**test？