Why absolute path for importing images has wrong format in Webpack 5?

Question

After migration to webpack5 and updating all libraries I faced with this issue.

Here is my webpack config:

const path = require('path');
const glob = require('glob');
const {ProvidePlugin} = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const WebpackNotifierPlugin = require('webpack-notifier');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

const {watch, assetsRoot, assetsPublicPath, assetsSubDirectory} = require('./config');

const getAssetsPath = (_path, dir) => {
    return path.posix.join(dir ? dir : assetsSubDirectory, _path);
};

const getPlugins = () => {
    if (watch) {
        return [
            new BrowserSyncPlugin({
                proxy: 'https://mysite/',
                host: 'mysite.com',
                port: '3000',
                open: 'external',
            }),
        ];
    }

    return [
        // Extract CSS into its own file
        new MiniCssExtractPlugin({
            filename: getAssetsPath('[name].[hash].css', 'css'),
        }),
    ];
};

module.exports = {
    mode: watch ? 'development' : 'production',
    devtool: watch ? 'inline-source-map' : 'source-map',
    watch,
    entry: {
        app: [
            ...glob.sync('./assets/js/**/*.js'),
            './assets/sass/app.scss',
            ...glob.sync('./assets/css/**/*.css'),
        ],
        react: './react/index.js',
    },
    output: {
        path: assetsRoot,
        filename: getAssetsPath(`[name]${watch ? '' : '.[hash]'}.js`, 'js'),
        publicPath: assetsPublicPath,
        clean: true,
        assetModuleFilename: '[name][ext]'
    },
    resolve: {
        extensions: ['.js', '.jsx', 'css', 'scss'],
        modules: [path.join(__dirname, '..', 'node_modules'), 'node_modules'],
    },
    optimization: {
        minimizer: [new CssMinimizerPlugin()],
    },
    plugins: [
        ...getPlugins(),
        new ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
        new WebpackNotifierPlugin(),
        new WebpackManifestPlugin(),
        new CssMinimizerPlugin(),
        new Dotenv(),
    ],
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.s?css$/,
                use: [
                    {
                        loader: watch ? 'style-loader' : MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 2,
                        },
                    },
                    'scoped-css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.svg?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'static/',
                        }
                    }
                ],
            },
            {
                test: /\.(png|jpe?g|gif)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'static/',
                        }
                    }
                ],
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'static/',
                        }
                    }
                ],
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'static/',
                        },
                    },
                ],
            },
        ],
    }
};

When I ran my local env I noticed that images and icons from fa-icons library are absent. So I figured out the reason of the issue, I see in browser's console that my path to images was changed from mysite.com/build/static/image.jpg to mysite.com/build/image.jpg. When I tried to change path manually - I see image. So why it skipped /static/ part ?

Answer 1

assetModuleFilename: 'folder/[name][ext] 

And also add required type.