Css refers to the picture, but you can't find the picture after packing it with webpack.

I want to use webpack for program packaging. I have an image address referenced in one of my css. After executing build, I want to put this image in the images folder, but I can"t find the address specified before in css after packaging.
for example, my code in a css is as follows:

body{
    background: url("../images/pic.png") no-repeat center center;
}

my file directory is:
-- assets
-- css

--style.css

-- images

--pic.png

-- index.js

my webpack configuration is as follows:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "static/[hash].js",
        publicPath:"dist/"
    },
    resolve: {
        alias: {
            // Utilities: path.resolve(__dirname, "src/utilities/"),
        },
        extensions: [".js", ".vue"]
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        },
        // {
        //     test: /\.css$/,
        //    use: ["style-loader","css-loader" ]
        // },
        {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader"]
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: "url-loader",
            options: {
                limit: 1000,
                name: "[name].[ext]",
                outputPath: "../images/"
            }
        },
        {
            test: /\.(eot|ttf|woff|woff2)$/,
            loader: "url-loader",
            options: {
                limit: 1000,
                name: "[name].[ext]",
                outputPath: "./static/fonts/"
            }
        }
        ]
    },
    plugins: [  //2
        new HtmlWebpackPlugin({
            template: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash:8].css",
            chunkFilename: "./static/css/[id].css"
        }),
        new CleanWebpackPlugin(["dist"]),
        new webpack.NoEmitOnErrorsPlugin()   //
    ]
}

error will be reported after packing:

webpack will package my pictures in the css folder by default.

how should I configure it?

Webpack

Mar.06,2021