我第一次使用Webpack开发一个原生Javascript项目文件示例示例

我第一次使用 Webpack 开发一个原生 Javascript 项目。

这在“生产”和“开发”模式下都能成功编译，但它显示的不是图像，而是损坏的图像图标。

这是项目文件夹结构：

这是 webpack.config.js 文件：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  entry: {
    main: "./src/js/index.js",
  },
  output: {

    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Life Quality App",
    }),
  ],
  module: {
    rules: [
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],

      },
      {
        test: /.(eot|svg|ttf|woff|woff2|png|jpe?g|gif)$/i,
        type: "asset/resource",
        use: {
          loader: "img-optimize-loader",
          options: {
            compress: {
              mode: "lossless",
            },
          },
        },
      },
      {

        test: /.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        use: {
          loader: "url-loader",
          options: {
            name: "fonts/[name].[ext]",
          },
        },
      },
      {
        test: /.js$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",

          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
  devServer: {
    static: path.resolve(__dirname, "dist"),
    open: true,
  },

};

这些是我导入图像的 javascript 文件的示例：

rendSearchUI.js

index.js

import "../styles/main.css";
import renderSearchUI from "./renderSearchUI.js";
window.addEventListener("DOMContentLoaded", () => {
  renderSearchUI();
});

如果我运行 console.log(img.src) 它显示不正确的路径：“：8080/c744d32a4afed775625c.jpg”

我该如何解决这个问题？

非常感谢！