Webpack 5 как настроить правильную сборку изображений?

Itisfun, приведу фрагменты своих конфигов, возможно это костыльно и коряво, но у меня все пути к ассетам из scss корректно резолвятся.

-------------------------------------
webpack.common.js
-------------------------------------

const PATH = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack');
const paths = require('./paths');

module.exports = {
 
  // Where webpack looks to start building the bundle
  context: PATH.resolve(__dirname, '../src/pages'),
  entry: {
    index: ['./home/home.js', './home/home.scss', './home/home.html'],
    about: ['./about/about.js', './about/about.scss', './about/about.html'],
  },

  // Where webpack outputs the assets and bundles
  output: {
    path: paths.build,
    filename: '[name].bundle.js',
    publicPath: './',  
  },

  // Customize the webpack build process
  plugins: [
    // Removes/cleans build folders and unused assets when rebuilding
    new CleanWebpackPlugin(),

    // Generates an HTML file from a template
    // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
    new HtmlWebpackPlugin({
      title: 'Home',
      favicon: PATH.resolve(paths.src, 'images/favicon.png'),
      template: PATH.resolve(__dirname, '../src/pages/home/home.html'), // template file
      filename: 'index.html', // output file,
      chunks: ['index'],
    }),
    new HtmlWebpackPlugin({
      title: 'About',
      favicon: PATH.resolve(paths.src, 'images/favicon.png'),
      template: PATH.resolve(__dirname, '../src/pages/about/about.html'), // template file
      filename: 'about.html', // output file,
      chunks: ['about'],
    }),
  ],

  // Determine how modules within the project are treated
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },

      // JavaScript: Use Babel to transpile JavaScript files
      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },

      // Styles: Inject CSS into the head with source maps
      {
        test: /\.(scss|css)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { sourceMap: true, importLoaders: 1 },
          },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },

      // Images: Copy image files to build folder
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
      generator: {
          filename: 'assets/images/[hash].min[ext]',
        },
        use: [
          {
            loader: ImageminPlugin.loader,
            options: {
              bail: false,
              cache: false,
              imageminOptions: {
                plugins: [
                  ['pngquant', { quality: [0.5, 0.5] }],
                  ['mozjpeg', { quality: 50, progressive: true }],
                  ['gifsicle', { interlaced: true, optimizationLevel: 3 }],
                  [
                    'svgo',
                    {
                      plugins: [{ removeViewBox: false }],
                    },
                  ],
                ],
              },
            },
          },
        ],
      },

      // Fonts: Copy fonts files to build folder
      {
        test: /\.(woff(2)?|eot|ttf|otf)$/,
        type: 'asset/resource',
      generator: {
          filename: 'assets/fonts/[name][ext]',
        },
      },
      // SVGs: Copy SVGs files to build folder
      {
        test: /\.svg$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/svg/[hash][ext]',
        },
      },
    ],
  },
};

--------------------------------------------
webpack.prod.js
---------------------------------------------

const { merge } = require('webpack-merge');
const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const common = require('./webpack.common.js');
const paths = require('./paths');

module.exports = merge(common, {
  mode: 'production',
  devtool: false,
  output: {
    path: paths.build,
    publicPath: './',
    filename: 'scripts/[name].[contenthash].bundle.js',
  },
  plugins: [
    // Extracts CSS into separate files
    // Note: style-loader is for development, MiniCssExtractPlugin is for production
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
             publicPath: '../', 
            },
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: false,
            },
          },
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },
  },

  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
});

А вот моя файловая структура внутри папки src ➜ src git:(dev) tree
.
├── fonts
│ ├── Inter.ttf
│ └── Montserrat
│ ├── Montserrat-BlackItalic.ttf
│ ├── Montserrat-Black.ttf
│ ├── Montserrat-BoldItalic.ttf
│ ├── Montserrat-Bold.ttf
│ ├── Montserrat-ExtraBoldItalic.ttf
│ ├── Montserrat-ExtraBold.ttf
│ ├── Montserrat-ExtraLightItalic.ttf
│ ├── Montserrat-ExtraLight.ttf
│ ├── Montserrat-Italic.ttf
│ ├── Montserrat-LightItalic.ttf
│ ├── Montserrat-Light.ttf
│ ├── Montserrat-MediumItalic.ttf
│ ├── Montserrat-Medium.ttf
│ ├── Montserrat-Regular.ttf
│ ├── Montserrat-SemiBoldItalic.ttf
│ ├── Montserrat-SemiBold.ttf
│ ├── Montserrat-ThinItalic.ttf
│ ├── Montserrat-Thin.ttf
│ └── OFL.txt
├── images
│ ├── bg.jpg
│ ├── favicon.png
│ ├── webpack-logo.svg
│ └── winter-forest-bg.jpg
├── js
│ └── common.js
├── pages
│ ├── about
│ │ ├── about.html
│ │ ├── about.js
│ │ ├── about.scss
│ │ └── img
│ │ └── kangaroo_PNG17.png
│ └── home
│ ├── home.html
│ ├── home.js
│ └── home.scss
└── styles
├── common.scss
├── _fonts.scss
├── _mixins.scss
├── _scaffolding.scss
└── _variables.scss

9 directories, 37 files

Webpack 5 как настроить правильную сборку изображений?

Itisfun, я сам не силен в конфигурировании Webpack и не могу точно сказать как это настроить, но мне кажется тут можно найти ответ на ваш вопрос Asset Modules
Вот еще хорошая статья на русском от Сергея Мелюкова - контрибьютора данной фичи Webpack 5 — Asset Modules

Как подключить файл json к файлу pug?

Можете уточнить, а как именно обращаться к глобальному объекту jsons из pug-шаблонов? Как синтаксически это оформить?

В чем разница между командами "pyenv local someEnvName" и "pyenv virtualenv activate someEnvName" ???

Алексей Guest007, Прости за назойливость, я вроде бы сделал все, как ты и советовал, НО)))
Мне удалось побороть две пары круглых скобок с указанием двух виртуальных окружений. При переходе из каталога в каталог с разными окружениями они автоматически переключаются.

Скрин терминала Ubuntu

Однако, осталась самая главная проблема. Локальные виртуальные окружения по прежнему смотрят в глобальное пространство пакетов, т.е. pip3 list по прежнему выводит один и тот же список глобальных пакетов для трех разных окружений...И кажется, я знаю в чем дело. Дело в том, что после команды which python для каждого каталога со своим собственным вирт. окружением отображается путь /usr/bin/python, т.е. путь до системного интерпретатора Python по-умолчанию.
Теперь вопрос, где (в каких файлах) мне надо поправить эти самые пути, чтобы они адекватно указывали на соответствующие пути к виртуальным окружениям ???

з.ы. На последнюю мысль меня натолкнула выдержка из этой статьи https://realpython.com/python-virtual-environments... Правда здесь речь не в контексте использования pyenv. Но что-то про активацию явно пишут. Я вот думаю, может надо дополнительные манипуляции по активации делать, кроме как pyenv local virtEnvName ???

Цитата из статьи

В чем разница между командами "pyenv local someEnvName" и "pyenv virtualenv activate someEnvName" ???

Алексей Guest007,
Насчет:

Снеси все настройки, удали как .pyenv каталог, так и, как минимум, глобальную привязку и начни всё с чистого листа без лишних телодвижений.

Как это лучше реализовать, через какие-то команды в терминале или вручную папки в корзину отправлять или без разницы ?

Насчет глобальной привязки не совсем понял, как её "отвязать" ?

В любом случае, спасибо тебе за уделенное время.

з.ы. Что-то мне подсказывает, что придется сносить всю убунту))) Я толком уже не помню что и в каких файлах я прописывал, где раскомментировал "нужные" строки, а где наоборот...Засада вообщем....

В чем разница между командами "pyenv local someEnvName" и "pyenv virtualenv activate someEnvName" ???

Окей, спасибо. Но почему после следующих манипуляций у меня следующая картина ???

ШАГ 1.

ШАГ 2.

ШАГ 3.

ШАГ 4.

ШАГ 5.


По сути, у меня только два основных вопроса. Это нормально, что у меня отображаются две виртуальные среды в строке приглашения терминала ?
Например так :

И второй вопрос, почему после команды pip3 list мне выводится список всех пакетов (

Список пакетов

apturl (0.5.2)
argcomplete (1.8.1)
asn1crypto (0.24.0)
astroid (2.2.5)
beautifulsoup4 (4.6.0)
Brlapi (0.6.6)
certifi (2018.1.18)
chardet (3.0.4)
command-not-found (0.3)
cryptography (2.1.4)
cupshelpers (1.0)
Cython (0.29.2)
defer (1.0.6)
distro-info (0.18ubuntu0.18.04.1)
galternatives (0.92.2)
html5lib (0.999999999)
httplib2 (0.9.2)
idna (2.6)
isort (4.3.21)
jedi (0.11.1)
keyring (10.6.0)
keyrings.alt (3.0)
language-selector (0.1)
launchpadlib (1.10.6)
lazr.restfulclient (0.13.5)
lazr.uri (1.0.3)
lazy-object-proxy (1.4.1)
louis (3.5.0)
lxml (4.2.1)
macaroonbakery (1.1.3)
Mako (1.0.7)
MarkupSafe (1.0)
mccabe (0.6.1)
netifaces (0.10.4)
oauth (1.0.1)
olefile (0.45.1)
parso (0.1.1)
pexpect (4.2.1)
Photohash (0.4.1)
Pillow (5.3.0)
pip (9.0.1)
progressbar (2.3)
protobuf (3.0.0)
psutil (5.4.8)
pycairo (1.16.2)
pycrypto (2.6.1)
pycups (1.9.73)
pygobject (3.26.1)
pylint (2.3.1)
pymacaroons (0.13.0)
PyNaCl (1.1.2)
pyRFC3339 (1.0)
python-apt (1.6.4)
python-chess (0.24.1)
python-dateutil (2.6.1)
python-debian (0.1.32)
python-gnupg (0.4.1)
pytz (2018.3)
pyxattr (0.6.0)
pyxdg (0.25)
PyYAML (3.12)
reportlab (3.4.0)
requests (2.18.4)
requests-unixsocket (0.1.5)
scandir (1.9.0)
scour (0.36)
screen-resolution-extra (0.0.0)
SecretStorage (2.3.1)
setuptools (40.6.3)
simplejson (3.13.2)
six (1.12.0)
speedtest-cli (2.1.1)
system-service (0.3)
systemd-python (234)
thonny (2.1.16)
typed-ast (1.4.0)
ubuntu-drivers-common (0.0.0)
Ubuntu-Make (18.5)
ufw (0.36)
unattended-upgrades (0.1)
urllib3 (1.22)
usb-creator (0.3.3)
virtualenv (16.6.2)
wadllib (1.3.2)
webencodings (0.5)
wheel (0.30.0)
wrapt (1.11.2)
xkit (0.0.0)
youtube-dl (2019.6.8)
zope.interface (4.3.2)

), установленных глобально (на уровне системы), т.е. для версии (base) как я понимаю, в то время, как он должен быть по идее пустым, т.к. я еще никаких пакетов не устанавливал для текущего виртуального окружения...

Ну и напоследок, для чего нужна команда pyenv shell?

з.ы. Может...Причина в настройках для путей в файлах .zshrc, .zprofile или .zshenv ???
Это я к тому, что пока я разбирался с этими всеми виртуальными окружениями, в процессе установки тех или иных пакетов (версий интерпретаторов Python) мне приходилось доустанавливать различные библиотеки для Ubuntu и прописывать различные "китайские иероглифы" скопипащенные с соответствующих мануалов и ответов со stackowerflow в те самые файлы, для корректной работы pyenv.