👌😄

А практических занятий у вас много?

Не совсем понял вопрос.... У меня? Ну как могу, чередую теорию и практику

Всем привет! Вопрос по webpack! Столкнулся с проблема касаемо путей у картинок в css при переводе проекта в build(в моём случае в dist).
Дело в том, что когда я работаю в less файлах в режиме разработки, у меня путь к картинкам(иконки языков) такой: '/img/' . Но в dist, путь должен быть такой: '../img', иначе картинки не видны. Подскажите пожалуйста, как это сделать? Как подправить webpack-config, чтобы пути генерировались правильно? Сразу отмечу, что сама папка img статична. То есть, webpack-config никак не работает с изображениями. Они изначально находятся в папке dist
P.S. Откройте и с помощью webpack и сам dist после билда, чтобы увидеть разницу.
Ссылка: https://codesandbox.io/s/vibrant-http-f211v?file=/src/less/index.less

dist папка у тебя создается автоматически, что бы туда попадали файлы нужно установить https://webpack.js.org/loaders/file-loader/ плагин, все файлы, которые попадают в dist папку резолвятся вебпаком, посмотри какие-нибудь обучающие видео, ты не до конца понял как работает вебпак

если указываешь относительные пути, начинающиеся с  '/' то нужно использовать copy-webpack-plugin, который перенесет файлы из src в  dist, при использовании file-loader плагина, указываешь путь именно к файлу в src, вебпак сам его перенесет в dist

вот что я сделал!
 1) Удалил папку img из dist и поставил её в src
 2) Установил file-loader
 3) Прописал следующие настройки

{
       test: /\.(png|jpe?g|gif)$/i,
       use:[
         {
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath:'img/',
             publicPath:'img/'
           },
         }
         
       ],
     
     }

Как результат, папка img не появилась в dist и изображения конечно не загрузились. Что ещё нужно сделать?

В less файле указывать пути к картинкам в src папке

у меня в less файла такой путь: '/img/en.png'

Это абсолютный путь, а должен быть относительный

../img/en.png

пробовал. Не помогает

Вот мой проект: https://codesandbox.io/s/silent-pine-cpdd6?file=/webpack.config.js

я немного изменил код, добавив ещё и изображение в html. То есть, картинки нужно грузить как с less файла так и с html. Пока ничего не работает. Не знаю, что ещё нужно подправлять в webpack: https://codesandbox.io/s/kind-silence-9rf1k?file=/src/index.html

{
  test: /\.(png|jpe?g|gif)$/i,
  use:[
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath:'img/',
        publicPath:'../img/',
      },
    },
  ],
}

и замени абсолютные пути на относительные как выше советовали
url(/img/ru.png) → url(../img/ru.png)

{
  test: /\.(png|jpe?g|gif)$/i,
  use:[
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath:'img/',
        publicPath:'../img/',
      },
    },
  ],
}

я написал так и сработало:
             outputPath:'img',
             publicPath:'/img/'
но это только для less файлов. А вот что делать, если картинка находиться в html, я не знаю

нужно добавить html-loader

попробую

Подскажите, как можно задержать весь основной js код на секунду. Просто делаю прелоадер и хочу, чтобы как минимум одну секунду страница была в прелоадере