Javascript 网页包将错误图像加载到dist目录

我的

webpack.config.js

文件

const path=require（'path'）；
const HtmlWebPackPlugin=require（'html-webpack-plugin'）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
const{CleanWebpackPlugin}=require（'clean-webpack-plugin'）；
const CopyWebpackPlugin=require（'copy-webpack-plugin'）；
module.exports={
条目：{
索引：'./src/js/index.js'，
},
模块：{
规则：[
{
测试：/\.js$/,，
排除：/node_模块/，
用法：['babel-loader']，
},
{
测试：/\.html$/,，
使用：[
{
加载器：“html加载器”，
选项：{minimize:true}，
},
],
},
{
测试：/\（巴布亚新几内亚），
使用：{
加载器：“url加载器”，
},
},
{
测试：/\（css | scss）$/，
使用：[
MiniCssExtractPlugin.loader，
“css加载程序”，
'邮政编码加载器'，
“sass loader”，
],
},
],
},
输出：{
path:path.resolve（uu dirname，'./dist'），
文件名：'./js/[name].bundle.js'，
},
插件：[
新HtmlWebPackPlugin({
模板：path.resolve（uu dirname，'./src/index.html'），
文件名：“index.html”，
块：['index']，
}),
新的CleanWebPackagePlugin（），
新的MinicsSextract插件({
文件名：'./css/[name].css'，
}),
新的CopyWebpackPlugin({
模式：[{from:'./src/assets'，to:'./assets'}]，
}),
],
devtool:'源映射'，
模式:"发展",，
};

出现问题的“我的文件”结构：

奇怪的是，当我在

终端

中运行

npm run build

时，所有目录都正确加载，我的意思是：

背景图像

工作，加载了带图像的

滑块

目录，但也加载了一些带有随机数字名称的附加文件

---

另外三个

.png

文件被加载到我的

index.html

中，作为

img1.png

img2.png

和

img3.png

文件，它们不想加载，我想你的图像文件可能是双重处理的，因为您曾经只需将资产文件夹复制到dist output文件夹，然后您可能会在某个地方使用css文件中带有

url（“./someImage”）

或类似内容的图像，这些图像由css加载程序或css Mini extract插件处理，创建神秘的图像资产输出，然后在html文件中使用，看看这里：webpack.js.org/guides/asset management/#加载图像。。我不知道为什么你需要复制你的资产文件夹，但这看起来多余的我

编辑：我不是这方面的专家，但在调查了几个小时的奇怪错误后，我意识到图像文件的路径设置正确，但文件加载程序或其他加载程序生成的图像输出（如0f9b8be78d378ad2ef78.jpg）似乎有所不同，如果我在标准文本/二进制编辑器的vscode编辑器中打开它们，我会得到以下行：

export default\uuuuu webpack\u public\uuuu path\uuuuu+“someimage.jpg”，其url加载程序是使用数据url（..）转换的二进制64字符串。。因此，在静态html文件中使用它似乎不是目的

然后，我在webpack.config.js中使用了推荐的方法：

        {   test: /\.(jpg|png)$/, 
            type: 'asset/resource', }

const path = require('path')

const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: {
        index: './src/js/index.js',
    },
    devServer: {
        port: 5757,
        contentBase: path.resolve(__dirname, 'src'),
        publicPath: '/src',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: { minimize: true },
                    },
                ],
            },
            {
                test: /\.(jpg|png)$/,
                type: 'asset/resource',

            },
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
        ],
    },

    output: {
        path: path.resolve(__dirname, './build'),
        //publicPath: './assets/images',
    },

    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
            inject: 'body',
        }),

        new MiniCssExtractPlugin({
            filename: './css/[name].css',
        }),
    ],

    devtool: 'source-map',
    mode: 'development',
}

在我的图像正确显示之后，我不知道文件加载器等在做什么

这是我的最后一个webpack.config.js：

        {   test: /\.(jpg|png)$/, 
            type: 'asset/resource', }

const path = require('path')

const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: {
        index: './src/js/index.js',
    },
    devServer: {
        port: 5757,
        contentBase: path.resolve(__dirname, 'src'),
        publicPath: '/src',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: { minimize: true },
                    },
                ],
            },
            {
                test: /\.(jpg|png)$/,
                type: 'asset/resource',

            },
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
        ],
    },

    output: {
        path: path.resolve(__dirname, './build'),
        //publicPath: './assets/images',
    },

    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
            inject: 'body',
        }),

        new MiniCssExtractPlugin({
            filename: './css/[name].css',
        }),
    ],

    devtool: 'source-map',
    mode: 'development',
}

我刚刚解决了我的所有问题，因为在使用了
@ChillaBee
的答案后，除了我在
css
文件中使用的
url
背景照片之外，其他图像都正常工作。使用上面的答案，但要改变

{
    test: /\.(jpg|png)$/,
    type: 'asset/resource',
},

到

现在html和css中的图像已正确加载
我尝试删除CopyWebpackPlugin角色，然后使用此{test://\（png | svg | jpg | jpeg | gif）$/I，键入：'asset/resource'，}，已在index.js中导入文件，但仍不起作用HMMM您是否可以尝试“输出”配置以添加
publicPath:'/'
选项，或者，可以尝试文件加载程序：
npm i file loader
和配置：
{test://\。（jpe？g | png | gif | svg）$/i，使用：'file loader'}
然后我用随机数字名称正确加载了所有照片，另外我得到了另外3个带有随机数字值的.png文件，但错误为“Image not loaded”，就像以前一样，我也没有得到我的资产文件夹，所有png文件都加载到main./dist directoryhmmm，i fo在这里找到另一个线程：…但是你已经尝试了publicPath？你能在原始线程中添加导入图像的代码吗？我在回答中添加了它。。。