@scorpion11133

Почему background:url([object Module])?

Подскажите, почему так картинка в фоне?
5e7616fbbb5dd271516954.png

body {
  background: url('../img/aguero5.jpg') no-repeat;
}


const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HTMLPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const PATHS = {
  src: path.join(__dirname, './src'),
  dist: path.join(__dirname, './dist')
};
const PAGES_DIR = PATHS.src;
const PAGES = fs
  .readdirSync(PAGES_DIR)
  .filter(fileName => fileName.endsWith('.html'));

module.exports = {
  entry: `${PATHS.src}/js/`,
  output: {
    filename: 'js/bundle.js',
    path: `${PATHS.dist}`
  },
  optimization: {
    minimizer: [new OptimizeCssAssetsPlugin({}), new UglifyJsPlugin({})]
  },
  devServer: {
    contentBase: `${PATHS.dist}`,
    port: 4200,
    overlay: {
      warnings: true,
      errors: true
    }
  },
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map'
    }),
    new CopyPlugin([{ from: `${PATHS.src}/img`, to: `${PATHS.dist}/img` }]),
    new CleanWebpackPlugin(),
    ...PAGES.map(
      page =>
        new HTMLPlugin({
          template: `${PAGES_DIR}/${page}`,
          filename: `./${page}`
        })
    ),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ],
  performance: { hints: false },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              publicPath: 'img',
              outputPath: 'img',
              useRelativePath: true
            }
          },

          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              }
            }
          }
        ]
      }
    ]
  }
};
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
parmactep
@parmactep
По умолчанию file-loader экспортирует файл в виде ES-модуля. Изменить это можно опцией esModule: false
{
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              publicPath: 'img',
              outputPath: 'img',
              useRelativePath: true,
              esModule: false,
            }
          },

          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              }
            }
          }
        ]
      }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы