S
S
Stanislavsus2022-03-13 16:30:10
webpack
Stanislavsus, 2022-03-13 16:30:10

How to bundle images in Webpack added via jsDOM?

I create an img element in js and add src to it. The element itself appears, but the image is not available, but all other images created in html are successfully added to the bundle and are also successfully displayed. What should be done?

js

this.close = document.createElement('img')
this.close.src = "../img/close.png"


webpack.config
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', 
        } 
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif)$/i,
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html', 
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question