Webpack 5:assets文件夹仅在第二个npm run dev命令后生成

我刚刚开始使用Webpack，现在我正在尝试使用Webpack 5及其新功能设置我的项目：字体（tf | woff | woff2 | eot | otf）和图像（png | jpg | gif | svg）的资产模块。项目构建成功：我得到dist/main.css、dist/main.js、dist/index.html。所有图像和字体文件都在output dist目录中以[hash][ext][query]文件名发出

我的项目树是：

webpack.config.js
dist
src
--css
--fonts
--img
--index.html
--index.js

我的网页包配置：

const path = require('path');

const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin'); 
const TerserWebpackPlugin = require('terser-webpack-plugin');

const NODE_ENV = process.env.NODE_ENV;
const IS_DEV = NODE_ENV === 'development';
const IS_PROD = !IS_DEV;

module.exports = {
mode: NODE_ENV ? NODE_ENV : 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output : {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: './',
    // assetModuleFilename: 'assets/[hash][ext][query]',
},

module: {
    rules: [

        {
        test: /\.html$/,
        use: 'html-loader'
        },

        {
            test: /\.css$/,
            use: [
                {
                loader: MiniCssExtractPlugin.loader, //instead of style-loader
                options: {
                    publicPath: './'
                    },
                },
                'css-loader'
                ],
        },

        {
            test: /\.(png|jpg|gif|svg)$/,
            type: 'asset/resource',
            // generator: {
            //  filename: 'images/[hash][ext][query]'
            // }
        },

        {
            test: /\.(ttf|woff|woff2|eot|otf)$/,
            type: 'asset/resource',
        },
    ],
},

plugins:
[
    new CleanWebpackPlugin({
        cleanStaleWebpackAssets: false
    }),

    new HTMLWebpackPlugin({
        template: path.resolve(__dirname, 'src/index.html'),
        minify: {
            collapseWhitespace: IS_PROD,
        }
    }),

    new MiniCssExtractPlugin(),
],

optimization: {
    minimizer: [
        new CssMinimizerWebpackPlugin(),
        new TerserWebpackPlugin(),
    ],
},

devServer: {
    port: 3000,
    hot: true,
}

}

问题#1：当我将assetModuleFilename:“assets/[hash][ext][query]”设置为我的网页配置中的输出时

module.exports = {
mode: NODE_ENV ? NODE_ENV : 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output : {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: './',
    assetModuleFilename: 'assets/[hash][ext][query]',
},

并在第一次出现错误时运行构建（npm run dev）

 Error: EPERM: operation not permitted, lstat 'E:\WEB\MiTravel\MiTravel\dist\assets\0a04460c0a144cf3f0a9.svg'
at Object.lstatSync (fs.js:1077:3)
at Function.rimrafSync [as sync] (E:\WEB\MiTravel\MiTravel\node_modules\rimraf\rimraf.js:299:24)
at E:\WEB\MiTravel\MiTravel\node_modules\del\index.js:65:11
at Array.map (<anonymous>)
at module.exports.sync (E:\WEB\MiTravel\MiTravel\node_modules\del\index.js:57:40)
at CleanWebpackPlugin.removeFiles (E:\WEB\MiTravel\MiTravel\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:198:37)

错误：EPERM:不允许操作，lstat'E:\WEB\MiTravel\MiTravel\dist\assets\0a04460c0a144cf3f0a9.svg'
在Object.lstatSync（fs.js:1077:3）
在Function.rimrafSync[作为同步]（E:\WEB\MiTravel\MiTravel\node\u modules\rimraf\rimraf.js:299:24）
在E:\WEB\MiTravel\MiTravel\node\u modules\del\index.js:65:11
在Array.map（）处
在module.exports.sync（E:\WEB\MiTravel\MiTravel\node\u modules\del\index.js:57:40）
在CleanWebpackPlugin.removeFiles（E:\WEB\MiTravel\MiTravel\node\u modules\clean webpack plugin\dist\clean webpack plugin.js:198:37）

此时，在output dist目录中成功构建了main.js、index.html、main.css和NO dist/assets dir。然后我只需重复（第二次）npm run dev命令并获取dist/assets dir，其中包含所有资产文件以及output dist目录中的main.js、index.html、main.css。所有的字体和图像都可以

我用谷歌搜索错误，试图改变不同的参数，但我仍然无法修复这个错误

---

提前感谢您的帮助和建议。

我使用的是同一个名字，它正在工作

assetModuleFilename: 'assets/[hash][ext][query]'

尝试将

assets

更改为

images

以查看它是否有效

generator: {
        filename: 'assets/[hash][ext][query]'