What should I do with the picture resources of npm sent by the vue plug-in?

I made a simple pop-up component used by the project as a plug-in and submitted it to npm.
but after I installed it, I found that the path reference to the image resource was incorrect, and I couldn"t find the picture for the plug-in.
check the code and find that the image has been packaged under the dist/ file and has not been converted into base64 and incorporated into the code. The
plug-in uses the vue-cli init webpack-simple command to create the project, and the configuration file in webpack.config.js is as follows:

var path = require("path")
var webpack = require("webpack")


const NODE_ENV = process.env.NODE_ENV

module.exports = {
  entry: NODE_ENV == "development" ? "./src/main.js" : "./src/lib/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    library: "easy-layer",
    libraryTarget: "umd",
    filename: "easy-layer.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "vue-style-loader",
          "css-loader"
        ],
      },      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    },
    extensions: ["*", ".js", ".vue", ".json"]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: "-sharpeval-source-map"
}

if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "-sharpsource-map"
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: ""production""
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

I have tried to modify

      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }

added the limit parameter, but had no effect.
tried not to write any code, only to write a css and, reference logo.png, packaging did not convert image resources.
how to solve this problem?

Nov.30,2021

use url-loader , file-loader does not support limit


how to solve the problem

Menu