Size: a a a

Webpack — русскоговорящее сообщество

2021 January 24

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
Алексей
но он влияет на структуру папок, но не на путь в самом css файле
у mini-css-extract есть свой publicPath
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
короче я точно не могу сказать ответ, но что-то где-то там :)
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
если в дев и прод у тебя разная структура, то где-то должно быть условие
источник

#

#3301⏣SoulString in Webpack — русскоговорящее сообщество
Алексей
Всем привет! Вопрос по 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
а нет варианта обрабатывать эти файлы вебпаком? так вроде как было бы корректнее
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
#3301⏣SoulString
а нет варианта обрабатывать эти файлы вебпаком? так вроде как было бы корректнее
судя по всему, картинки там откуда-то из другого места приезжают
источник

#

#3301⏣SoulString in Webpack — русскоговорящее сообщество
Roman Usherenko
судя по всему, картинки там откуда-то из другого места приезжают
ну о том и вопрос
источник

RU

Roman Usherenko in Webpack — русскоговорящее сообщество
обычно это либо какой-то вордпресс, либо другое пхп-извращение :)
источник

#

#3301⏣SoulString in Webpack — русскоговорящее сообщество
Алексей
но он влияет на структуру папок, но не на путь в самом css файле
если варианта сделать правильно нет то смотреть надо в эту сторону
источник

#

#3301⏣SoulString in Webpack — русскоговорящее сообщество
но по идее оно не будет работать если файл в исходниках не существует
источник

#

#3301⏣SoulString in Webpack — русскоговорящее сообщество
хотя нет, почему
источник

А

Алексей in Webpack — русскоговорящее сообщество
#3301⏣SoulString
а нет варианта обрабатывать эти файлы вебпаком? так вроде как было бы корректнее
мне просто не нужно картинки обрабатывать
источник

#

#3301⏣SoulString in Webpack — русскоговорящее сообщество
Алексей
мне просто не нужно картинки обрабатывать
ну делать костыли ИМХО решение не лучше чем просто дать вебпаку самому целиком формировать dist если это возможно
источник

#

#3301⏣SoulString in Webpack — русскоговорящее сообщество
но если хочется то ссылка выше должна помочь
источник

А

Алексей in Webpack — русскоговорящее сообщество
#3301⏣SoulString
ну делать костыли ИМХО решение не лучше чем просто дать вебпаку самому целиком формировать 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 и изображения конечно не загрузились. Что ещё нужно сделать?
источник

С

Сергей in Webpack — русскоговорящее сообщество
Алексей
вот что я сделал!
 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 и изображения конечно не загрузились. Что ещё нужно сделать?
Можно просто копировать папку img из src в dist. А к фотографиям обращаться абсолютным путем, просто src="/img/1.png", background-image: url('/img/2.png')
источник

А

Алексей in Webpack — русскоговорящее сообщество
Сергей
Можно просто копировать папку img из src в dist. А к фотографиям обращаться абсолютным путем, просто src="/img/1.png", background-image: url('/img/2.png')
не помогает! Во первых, ничего почему-то не копируется...
источник

С

Сергей in Webpack — русскоговорящее сообщество
Алексей
не помогает! Во первых, ничего почему-то не копируется...
Вы используете copy-webpack-plugin?
источник

А

Алексей in Webpack — русскоговорящее сообщество
Сергей
Вы используете copy-webpack-plugin?
нет! Вот что у меня в конфиге: https://codesandbox.io/s/silent-pine-cpdd6?file=/webpack.config.js
источник

С

Сергей in Webpack — русскоговорящее сообщество
Попробуйте пробрасывать фотографии из src в dist плагином, и обращайтесь к фотографиям по абсолютному пути https://webpack.js.org/plugins/copy-webpack-plugin/
источник

DO

Dmitry Olyenyov in Webpack — русскоговорящее сообщество
webpack это бандлер. Поэтому 1) в dist нельзя лазить ручками, нельзя вообще предполагать в каком виде и что именно там хранится. 2) все исходные файлы должны быть каким-то образом импортированны в одной из entry points либо непосредственно, либо транзитивно.
источник