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

Question

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

我的项目树是：

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

我的webpack配置：

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]"设置为webpack配置中的输出时

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]',
},

并在第一次出现错误时运行build(npm-run-dev(。

Error: EPERM: operation not permitted, lstat 'E:WEBMiTravelMiTraveldistassetsa04460c0a144cf3f0a9.svg'
at Object.lstatSync (fs.js:1077:3)
at Function.rimrafSync [as sync] (E:WEBMiTravelMiTravelnode_modulesrimrafrimraf.js:299:24)
at E:WEBMiTravelMiTravelnode_modulesdelindex.js:65:11
at Array.map (<anonymous>)
at module.exports.sync (E:WEBMiTravelMiTravelnode_modulesdelindex.js:57:40)
at CleanWebpackPlugin.removeFiles (E:WEBMiTravelMiTravelnode_modulesclean-webpack-plugindistclean-webpack-plugin.js:198:37)

目前，在输出dist目录中有成功构建的main.js、index.html、main.css和NO-dist/assets-dir。然后，我只重复(第二次(npm运行dev命令，并在输出dist目录中获得dist/assets-dir和所有资产文件以及main.js、index.html、main.css。所有字体和图像都可以。

我在谷歌上搜索了这个错误，试图更改不同的参数，但我仍然无法修复这个错误。

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

Answer 1

我使用的是相同的名字，它正在工作。

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

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

尝试将assets更改为images，看看它是否有效。