我刚开始使用 Webpack，现在我正在尝试使用 Webpack 5 及其新功能设置我的项目：字体资产模块（tf|woff|woff2|eot|otf）和图像（png|jpg|gif |svg)。该项目成功构建：我得到了 dist/main.css、dist/main.js、dist/index.html。所有图像和字体文件都以 [hash][ext][query] 文件名在输出 dist 目录中发出。
我的项目树是：
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：当我将assetsModuleFilename: '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:\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)
此时在输出 dist 目录中有成功构建的 main.js、index.html、main.css 和 NO dist/assets 目录。然后我只是重复（第二次） npm run dev 命令并在输出 dist 目录中获取包含所有资产文件和 main.js、index.html、main.css 的 dist/assets 目录。所有字体和图像都可以。
我搜索了错误，尝试更改不同的参数，但我仍然无法修复此错误。
提前感谢您的帮助和建议。