Webpack - 无法加载资产（404 - 未找到）

Question

我正在使用 webpack 5 并正在处理一个奇怪的问题。

开发服务器找不到我的资产（图片、svgs），但 js 文件和 css 文件可以正常工作。如果我从图像文件加载器（在 webpack.conf 中）中删除 outputPath: "/assets/images", 值，那么文件将存储在主文件夹中并且可以正常工作。

所以我的想法是资产文件夹没有转移到开发服务器！？

Console Log Screenshot

我用任何配置设置、文档等测试了大约 6 个小时，但它不起作用。

这是我的 webpack.conf

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    module: {
        rules: [
            {
                exclude: /(node_modules)/,
                loader: 'babel-loader',
            },
            {
              test: /\.(sa|sc|c)ss$/,
              use: [
              MiniCssExtractPlugin.loader, 
              'css-loader',
              'sass-loader'
              ]
            },
            {
              test: /\.(png|mp4|svg|jpe?g|gif)$/,
              exclude: /fonts/,
              use: [
                  {
                      loader: "file-loader", 
                      options: {
                      name: '[name].[ext]',
                      outputPath: "/assets/images",
                      }
                  }
              ]
            },
            {
              test: /\.(eot|woff|woff2|ttf)$/,
              exclude: /assets/,
              use: [
                  {
                      loader: "file-loader", 
                      options: {
                      name: '[name].[ext]',
                      outputPath: "/assets/fonts",
                      }
                  }
              ]
            },
            {
              test: /\.html$/i,
              loader: 'html-loader',
            }
        ]
    },
    resolve: {
      extensions: ['*', '.js']
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        title: 'Project',
        template: './src/index.html',
        minify: false
      }),
      new CleanWebpackPlugin({
        cleanStaleWebpackAssets: false,
      }),
      new MiniCssExtractPlugin({
        filename: "app.css"
      })
    ],
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'app.js',
      publicPath: ''
    },
    devServer: {
      port: 8080,
      contentBase: './dist',
      publicPath: ''
    },
    mode: "development"
  };

包.json

{
  "name": "website_webpack",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@barba/core": "^2.9.7",
    "@lottiefiles/lottie-player": "^0.5.1",
    "gsap": "^3.5.1",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.1",
    "smooth-scrollbar": "^8.5.3",
    "webpack-cli": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-stage-3": "^7.8.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.0.0-alpha.17",
    "mini-css-extract-plugin": "^1.3.3",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "sass": "^1.30.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.10.3",
    "webpack-dev-server": "^3.11.0"
  },
  "directories": {
    "test": "test"
  },
  "description": ""
}

文件夹层次结构：

Dist

如果有人能帮助我，我会很高兴；）

问候， 史蒂夫

Answer 1

更新：

我已将文件 loader(jpg, mp4,..) 值更改为：

use: 'file-loader?name=./assets/images/[name].[ext]'

现在工作。