Webpack неправильно устанавливает путь к изображению в html файле
После сборки проекта Вэбпаком, путь к изображению в HTML указывается неверно.
<img src="fc306942422ede24b19c.jpg">
Вместо:
<img src="img/explore-section1-189905e9.jpg">
При этом нужный мне файл в папке dist появляется, но вместо него Вэбпак ссылается на какой-то мусор. Изображения к которым я ссылаюсь через CSS или JS, отображаются корректно.
конфигурация Вэбпак
//Webpack config
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
path = require('path')
module.exports = (env) => {
const isProd = env.mode === "production" ? true : false;
const mode = isProd ? "production" : "development";
return {
mode: mode,
output: {
filename: "main-[hash:8].js",
clean: true, //Clean "dist" before every new build
// path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
//html
{
test: /\.html$/,
use: ['html-loader'],
},
//js rules
{
test: /\.js$/,
exclude: /node_modules/,
// use: [{ loader: "babel-loader" }],
loader: "babel-loader",
},
//css rules
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{loader: "css-loader"},
],
},
//scss rules
{
test: /\.s[ac]ss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
//For images
{
test: /\.(png|gif|jpg|jpeg|ico)$/,
use: [
{
loader: "file-loader",
options: {
outputPath: "img",
name: "[name]-[hash:8].[ext]",
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
}),
new MiniCssExtractPlugin({
filename: "main-[hash:7].css",
}),
],
devServer: {
open: true,
},
devtool: "source-map",
};
};
Ответы (1 шт):
Автор решения: Marat Isaev
→ Ссылка
Насколько я разобрался в вопросе, проблема возникает у тех кто использует Webpack 5. Для решения проблемы я изменил часть конфигурации Вэбпака
output: {
filename: "main-[hash:8].js",
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: 'images/[hash][ext][query]'
}
Вместо File-loader для изображений я использовал
{
test: /\.(png|gif|jpg|jpeg|ico)$/,
type: 'asset/resource'
},
Решение нашел на сайте Вэбпак Гайдс