Не отображаются картинки webpack + pug
Пробую настроить webpack с pug, но почему-то не отображаются картинки на странице.
Подскажите, в чем может быть проблема? При чем при работе с чистым html все работает нормально и картинки показываются. И фоны через стили тоже показываются. Картинки в pug пробую подключать как в коде, так и через миксины:
include pug/libs/_libs
doctype html
html(lang="en")
include pug/_head
body
h1 hello webpack
p
| Lorem ipsum
span dolor
| sit amet.
.block
span.material-icons insert_emoticon
img(src="images/choco.png" alt="choco")
+image("choco")
Код миксина
mixin image(name)
img.src(src=`../src/images/${name}.png` alt=name)
Конфигурация webpack такая:
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,
performance: {
maxEntrypointSize: 1500000,
maxAssetSize: 1500000
},
output: {
assetModuleFilename: 'assets/[hash][ext][query]',
clean: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
new HtmlWebpackPlugin({
template: './src/index.pug'
})
],
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|ttf|svg)$/i,
type: 'asset/resource',
generator: {
filename: './assets/fonts/[hash][ext][query]',
},
},
{
test: /\.pug$/,
loader: 'pug3-loader',
exclude: /(node_modules|bower_components)/,
},
]
}
}
Ответы (1 шт):
Автор решения: barmalej
→ Ссылка
В общем, задачка решилась. Оказывается просто вот так
img(src="images/choco.png" alt="choco")
вставлять изображения в код pug страницы не верно. Нужно оборачивать путь до картинки в require() и путь должен быть полный ./images/imagename.png
img(src=require("./images/choco.png") alt="choco")
Тогда работает без copy-webpack-plugin и пр. допов с прямой вставкой или через миксины.