Почему после сборки webpack'ом появляется битая картинка?

Question

[SuchOP]

На картинке html файл до сборки, после обработки html-loader появляется битая картинка и итоговый html файл ссылается на её


код вебпака

/* eslint-disable no-undef */
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

const filename = (ext) => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;

const optimization = () => {
  const configObj = {
    splitChunks: {
      chunks: 'all'
    }
  }
  
  if (isProd) {
    configObj.minimize = true;
    configObj.minimizer = [
      new TerserPlugin(),
      new CssMinimizerPlugin(),
    ]
  }
  
  return configObj;
}

const plugins = () => {
  const basePlugins = [
    new HTMLWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
      filename: 'index.html',
      minify: {
        collapseWhitespace: isProd 
      },
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: `./css/${filename('css')}`
    }),
    new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, 'src/assets'),
        to: path.resolve(__dirname, 'app/assets')
      }]      
    }),
  ]
  
  if (isProd) {
    basePlugins.push(

      // <-- Image minimaizer here --> 
      
    )
  }

  return basePlugins
}

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: './js/main.js',
  output: {
    path: path.resolve(__dirname, 'app'),
    filename: `./js/${filename('js')}`,
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'app'),
    compress: true,
    port: 9000,
    open: true,
    hot: true,
    historyApiFallback: true,
  },
  plugins: plugins(),
  devtool: isProd ? false : 'source-map',
  optimization: optimization(),
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", 'sass-loader'],
      },
      {
        test: /\.js/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(?:|gif|png|jpg|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: `./img/${filename('[ext]')}`
          }
        }],
      },
      {
        test: /\.(?:|woff|eot|woff2|ttf|otf|fnt|fon)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: `./fonts/${filename('[ext]')}`
          }
        }],
      },
    ],
  },
};

Answer 1

[SuchOP]

нашел решение и отказался от file-loader

было:

{
        test: /\.(?:|gif|png|jpg|svg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: `./img/${filename('[ext]')}`
          }
        }],
      },

стало:

{
        test: /\.(?:|gif|png|jpg|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: () => {
            return isDev ? 'img/[name][ext]' : 'img/[name].[contenthash][ext]';
          }
        }
      },

Comments

[Aetae]

Так у тебя webpack 5. Так бы и сказал. Эти их assets в 5'ом вэбпаке - это великолепная мина, на которой подорвался каждый. Руки бы оторвал.

Answer 2

[Aetae]

То, что файл ссылается на обработанную картинку - так оно и должно быть, в том и смысл loader'ов. А вот то, что она бьётся - может быть по разным причинам. Обычно такое происходит когда в цепочку loader'ов случайно встраивается левый. Чисто глядя на конфиг сложно что-то сказать, по хорошему нужен полноценный проект-пример на потыкать.
Навскидку разве чтоtest: /\.js/, бросается в глаза, так как нет $ в конце, а значит может цеплять лишнего, но по идее тогда babel должен ругаться...

Answer 3

[TheSnegok]

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;
const filename = (ext) => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;

Твой секрет в этих трёх строчках, оно переименовывает твоё изображение, можешь попробовать сделать вот так:

const filename = (ext) => isDev ? `[name].${ext}` : `[name].${ext}`;

Comments

[SuchOP]

Это просто добавление хэша в продакшен сборке к файлам, изменить попробовал конечно, но результат тот же
Тут явно проблема в том что html-loader не видит путь к картинке, если его отключить то всё нормально становится

[TheSnegok]

SuchOP, Попробуй всё оставить как есть, а в src написать без точки в начале.
дело полюбому из-за этой точки в scr посмотри в ссылке примеры и напиши правильно и всё точно должно работать.

[SuchOP]

TheSnegok, нашел решение проблемы, оказывается file-loader уже устарел, теперь буду использовать Asset modules