How to collect images with webpack?

Question

JavaScript

Setting up webpack to save images. It saves folders and pictures as it should, but only if they are set as a background in css, and if you set them in html through the img tag , then it does not transfer pictures, how to deal with it?

webpack.config.js :

const path = require('path');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const baseConfig = {
    entry: path.resolve(__dirname, './src/index.ts'),
    mode: 'development',
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            images: path.resolve(__dirname, 'src/assets/img/')
        },
    },
    module: {
        rules: [
            {
              test: /\.ts?$/,
              use: 'ts-loader',
              exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
              test: /\.(png|svg|jpg|jpeg)$/,
              use: [
                  {
                    loader: 'file-loader',
                    options: {
                        name: 'assets/images/[name].[ext]',
                    },
                  },
              ],
            },
        ],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, '../dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
        }),
        new CleanWebpackPlugin(),
    ],
};

module.exports = ({ mode }) => {
    const isProductionMode = mode === 'prod';
    const envConfig = isProductionMode ? require('./webpack.prod.config') : require('./webpack.dev.config');

    return merge(baseConfig, envConfig);
};

package.json :

{
    "name": "christmass-task",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.base.config.js",
    "scripts": {
        "start": "webpack serve --open --config ./webpack.config.js --env mode=dev",
        "build": "webpack --config ./webpack.config.js --env mode=prod",
        "lint": "eslint . --ext .ts"
    },
    "repository": {
        "type": "git",
        "url": ""
    },
    "keywords": [],
    "author": "Aleh Serhiyenia",
    "license": "ISC",
    "homepage": "",
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^5.6.0",
        "@typescript-eslint/parser": "^5.6.0",
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^7.0.0",
        "css-loader": "^5.1.0",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.23.3",
        "eslint-plugin-prettier": "^3.4.0",
        "html-webpack-plugin": "^5.2.0",
        "prettier": "2.2.1",
        "style-loader": "^2.0.0",
        "ts-loader": "^9.2.6",
        "typescript": "^4.5.2",
        "webpack": "^5.37.1",
        "webpack-cli": "^4.5.0",
        "webpack-dev-server": "^3.11.2",
        "webpack-merge": "^5.7.3"
    },
    "dependencies": {
        "file-loader": "^6.2.0"
    }
}

weback.dev.config.js :

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, '../dist'),
    },
};

weback.prod.config.js :

module.exports = {
    mode: 'production',
};

Answer 1

Use the CopyWebpackPlugin plugin and copy them