Как подключать картинки в webpack 5 через asset/resource?

Question

[godsplane]

Я хочу чтобы картинки из папки src перемещались в папку dist. Сейчас это работает если я подключаю картинки в scss файле,но я так же подключаю эти картинки напрямую в Php файле, и в Php файле я уже указываю dist/images/image.png.
Как правильно подключать картинки в Php файл?

{
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: 'asset/resource',
                generator: {
                    filename: './images/[name][ext]',
                },
            },

webpack.config.js

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')



require('./font.config.js')

module.exports = {
    context: path.resolve(__dirname, 'src'),

    entry: {
        main: ['@babel/polyfill', '/app.js'],

    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    watchOptions: {
        aggregateTimeout: 200,
        poll: 1000,
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
        new BrowserSyncPlugin({
            proxy: 'omedia/',
            host: 'omedia/',
            snippetOptions: {
                ignorePaths: "/wp-admin/**"
            },
            files: '**/**/**.php',


        }),


    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('autoprefixer'),
                                ],
                            },
                        },
                    },
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('autoprefixer'),
                                ],
                            },
                        },
                    },
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: 'asset/resource',
                generator: {
                    filename: './images/[name][ext]',
                },
            },
            {
                test: /\.(ttf|woff|woff2)$/,
                type: 'asset/resource',
                generator: {
                    filename: './fonts/[name][ext]',
                },
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }

        ]
    }
}

Answer 1

[profesor08]

Отключи любые попытки парсинга ссылок на картинки, чтоб если бы ты написал url(/assets/images/imag.png), то после сборки, ничего бы не менялось. Даже если этой картинки нет, и самих папок нет. Если не получается, то придется правильно прописать пути и настроить output.
https://webpack.js.org/guides/asset-modules/

Далее копируй свои картинки, и не только картинки, куда надо с помощью copy-webpack-plugin.

P.S.
Картинки лучше подключать в html, а не в стилях. В стилях им делать нечего. В html ты можешь их легко заменить, сделать отзывчивыми, добавить отложенную загрузку и сделать кучу других ништяков. А в стилях это просто блокирующий ресурс.

Comments

[godsplane]

Я до этого исопльзовал копи плагин, но решил что он лишний.

[profesor08]

godsplane, без него по умолчанию будут копироваться только те файлы, которые явным образом используются в проекте (которые попадают в обработку лоадером)

[godsplane]

profesor08, в этом и вопрос как дать понять лоадеру что я использую файл в php

[profesor08]

godsplane, никак, лоадер не имеет отношения к пхп. Кипируй плагином copy-webpack-plugin