webpack dev server теряет изображения при изменении scss файлов
webpack теряет изображения при изменении scss при скрипте dev server, изображения в html при первой сборке все отлично.
базовый конфиг.
const { PATH } = require('./CONSTANTS')
const { getEnteries } = require('./GET_ENTERIES')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const enteries = getEnteries()
const entry = {}
enteries.forEach(({ path, name }) => {
entry[name] = `${path}/${name}.ts`
})
const configBase = {
entry,
output: {
filename: 'js/[name].js',
path: PATH.dist,
clean: true
},
resolve: {
extensions: ['.ts', '.js'],
alias: {
},
},
optimization: {
concatenateModules: true
},
module: {
rules: [
{
test: /\.html$/i,
loader: "html-loader"
},
{
test: /\.ts$/,
exclude: '/../node_modules/',
include: `${PATH.src}`,
use: [
{
loader: 'babel-loader'
},
{
loader: 'eslint-loader'
}
]
},
{
test: /\.styl$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'stylus-loader'
}
]
},
{
test:/\.(sc|sa)ss/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.pug$/,
use: ['html-loader','pug-html-loader'],
exclude: /(node_modules|bowercomponents)/,
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
type: 'asset/resource',
generator: {
filename: 'images/[name].[contenthash][ext]'
}
},
{
test: /\.ico$/,
type: 'asset/resource',
generator: {
filename: '[name][ext]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
}),
...enteries.map(({ path, name }) => {
console.log(path, name)
return new HTMLWebpackPlugin({
template: `${path}/${name}.pug`,
filename: `${name}.html`
})
}
)
]
}
module.exports = { configBase }