Why can't I embed images in webpack with HTML img tags?

Question

Why can't I embed images in webpack with HTML img tags?

Below is the content of webpack.config.js.

// webpack.config.js
const {
    CleanWebpackPlugin,
} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = [{
        mode: 'development',
        entry: {
            'px.bundle': ['./src/index.js'],
        },
        
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: '[name].js'
        },
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:[
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /\.(png|jpe?g|gif)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                        },
                    ],
                }
            ]
        },
        devServer: {
            static : {
                directory: path.join(__dirname, 'public'),
            },
            compress: true,
            port: 9000
        },
        plugins: [
            new CleanWebpackPlugin({
                cleanOnceBeforeBuildPatterns: ["**/*", "!assets/**/*", "!resources/**/*"],
            }),
            new MiniCssExtractPlugin({
                filename: 'style.css',
            }),
            new HtmlWebpackPlugin({
                title: 'Project Demo',
                minify: {
                    collapseWhitespace: true
                },
                hash: true,
                template: './src/index.html'
            }),

            
        ],
        performance: {
            hints: false,
            maxEntrypointSize: 512000,
            maxAssetSize: 512000,
        },
    }, {
        mode: 'product',
        entry: {
            'px.bundle': ['./src/index.js'],
        },
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: '[name].js',
        },
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader']
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin({
                cleanOnceBeforeBuildPatterns: ["**/*", "!assets/**"],
                cleanOnceBeforeBuildPatterns: ["**/*", "!resources/**"],
                cleanAfterEveryBuildPatterns: ['dist'],
            }),
            new MiniCssExtractPlugin({
                filename: 'style.css',
            }),
            new HtmlWebpackPlugin({
                title: 'Project Demo',
                minify: {
                    collapseWhitespace: true
                },
                hash: true,
                template: './src/index.html'
            }),
        ],
        performance: {
            hints: false,
            maxEntrypointSize: 512000,
            maxAssetSize: 512000,
        },
    },
];

And below is the code including the contents of index.html. <img class="header__logo" src="img/ico_logo.png" alt="company logo" />

If enter the npm run dev command like this, the contents of img/ico_logo.png are not output properly. Of course, I checked that the file is properly located in the path.

Change the above code to the following, <img class="header__logo" alt="company logo" />

If I include the following in my css

.header__logo{
    content:url('../img/ico_logo.png')
}

If enter the npm run dev command, I can see that it works properly.

If specify src as an img tag in HTML, webpack cannot include the image. I don't know if the webpack setting is wrong or if webpack works normally only through the url in css.

I'm wondering if for some reason webpack is not embedding the logo image properly, and how can I fix it?

Answer 1

I think the reason is that webpack can't read HTML, although you had used HtmlWebpackPlugin. It just helps you to extract the HTML to a file, but it looks like it doesn't read the content. I had the same problem, but I solved it by adding use html-loader . I increase a new object into rules.

,{
    test: /\.html$/i,
    loader: 'html-loader'
  }

And it works. And also, the file-loader has been replaced by Asset Modules in webpack 5. Hope this could help you, sincerely.

Answer 2

you can try with this

 {
      test: /\.(jpg|jpeg|png|gif|pdf|ico)$/,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "images/[name].[ext]",
          },
        },
      ],
    },
    {
      test: /\.html$/,
      use: [
        {
          loader: "html-loader",
          options: {
            minimize: true,
          },
        },
      ],
    },