Конфиг:
const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
app: [
path.resolve(__dirname, './src/bundleStyles.js'),
path.resolve(__dirname, './src/main.js'),
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(png|jpeg|gif|svg|ico)$/i,
use:[
{
loader: 'file-loader',
options: {
publicPath: 'src/assets/img/',
outputPath: 'img/',
name: '[name].[ext]',
},
}
]
},
{
test: /\.html$/,
use: ['html-loader']
},
{
test:/\.(s*)css$/,
use: [
miniCss.loader,
'css-loader',
'sass-loader',
]
},
]
},
plugins: [
new miniCss({
filename: 'style.css',
}),
new HTMLWebpackPlugin({
template: "./src/index.html",
title: 'DIGITAL'
}),
new CleanWebpackPlugin(),
]
};
При билде он создаёт png, которое никак не относится к тому, что указано в вёрстке:
───dist
└───index.html
└───style.css
└───bunde.js
└───32yut2ee23423.png
└───img
└───img.png
Выше по дереву видно, что есть
32yut2ee23423.png
и папка Img, в которой нужное изображение.
Так же, в путях html он указывает путь именно до
32yut2ee23423.png
- как это исправить?