Начинаю редактировать файл со стилями и сразу битые картинки появляются в браузере, а как только переключаюсь на файл html вновь появляются. в чем может быть проблема?
webpack.config:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
let mode = 'development'
if (process.env.NODE_ENV === 'production') {
mode = 'production'
}
console.log(mode + ' mode')
module.exports = {
mode: mode,
entry: {
scripts: './src/index.js',
},
output: {
filename: '[name].[contenthash].js',
clean: true,
},
devServer: {
open: true,
static: {
directory: './src',
watch: true
}
},
devtool: 'source-map',
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
new HtmlWebpackPlugin({
template: "./src/index.html"
})],
module: {
rules: [
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.(sa|sc|c)ss$/,
use: [
(mode === 'development') ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
"sass-loader",
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}
]
},
}