Проблема с изображениями в Webpack, как решить?
Проблема в режиме разработки, когда запускаю локальней сервер, то любое изменение в коде (js) влечет за собой полное отключение картинок, и их просто нет на странице, даже во вкладке источник< их просто нет, нужно их комментировать, и обратно раскомментировать, тогда работает, но решить нужно
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,
output: {
filename: "[name].[contenthash].js",
assetModuleFilename: "assets/[hash][ext][query]",
clean: true,
},
devtool: "source-map",
devServer: {
port: 8888,
open: true,
watchFiles: ["./src/index.html"]
},
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",
{
},
],
],
},
},
},
"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",
options: {
presets: ["@babel/preset-env"]
},
},
},
],
},
}