Webpack images path in build - html

Question

webpack break my image paths
This is my code
and it is error
Refused to apply style from 'http://localhost:8080/style.css' because
its MIME type ('text/html') is not a supported stylesheet MIME type,
and strict MIME checking is enabled.
webpack.config.js
i use file-loader but this not help me
const path = require('path');
const HtmlWebpackPlugin = require('*html-webpack-plugin*');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devServer = (isDev) => !isDev ? {} : {
devServer: {
open: true,
port: 8080,
static: {
watch: true,
directory: '**/*.html',
},
},
};
module.exports = ({development}) => ({
mode: development ? 'development' : 'production',
devtool: development ? 'inline-source-map' : false,
entry: {
app:'./src/index.js',
main: './src/shelter/pages/main/index.js',
pets: './src/shelter/pages/pets/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
assetModuleFilename: 'assets/images/[hash][ext]',
},
module: {
rules: [
{
test: /\.(?:ico|gif|png|jpg|jpeg|svg|html|text)$/i,
use: ['file-loader']
},
{
test: /\.(woff(2)?|eot|ttf|otf)$/i,
type: 'asset/resource',
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
loader: 'file-loader',
options: {
publicPath: '/../../image',
name: `assets/images/[hash].[ext]`,
}
},
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
new HtmlWebpackPlugin({ template: './src/shelter/pages/main/index.html' }),
],
...devServer(development)
});
package.json
it is my package.json
{
"name": "webpack",
"scripts": {
"build": "webpack",
"dev": "webpack server --env development"
},
"devDependencies": {
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.0",
"sass": "^1.50.0",
"sass-loader": "^12.6.0",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"file-loader": "^6.2.0",
"resolve-url-loader": "^5.0.0",
"webpack-dev-server": "^4.8.1"
}
}
My structure fails enter image description here