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

Обсуждения webpack, лоадеров, плагинов и сборок Правила: http://bit.ly/our_etiquette См. также: @rollup_ru, @react_js, @vscode_ru, @macos_ru, @js_ru

974 members

Архив канала @webpack_ru 3 марта 2017 г.

08:23:35 ДП
User 52321317
Кто-то рекламу дал :D
08:23:38 ДП
User 107340798
у меня вот так в конфиге:
  output: {
    path: resolve(__dirname, '..', 'dist'),
    filename: '[name].js',
    publicPath: '/',
    pathinfo: false,
  },
урл к картинке указан так:
<img src="/images/1.jpg" />

картинка лежит в папке:
 resolve(__dirname, '..', 'dist'),

лоадер для работы в таком случае нужен или нет? Я так понимаю, что нет. Или ошибаюсь?
08:24:08 ДП
User 32530886
User 52321317
Кто-то рекламу дал :D
я в чатиках написал
просто часто вопросы задают не в профильных чатиках
08:24:22 ДП
User 32530886
User 107340798
у меня вот так в конфиге:
  output: {
    path: resolve(__dirname, '..', 'dist'),
    filename: '[name].js',
    publicPath: '/',
    pathinfo: false,
  },
урл к картинке указан так:
<img src="/images/1.jpg" />

картинка лежит в папке:
 resolve(__dirname, '..', 'dist'),

лоадер для работы в таком случае нужен или нет? Я так понимаю, что нет. Или ошибаюсь?
лоадер нужен для require и import
08:24:59 ДП
User 32530886
User 107340798
у меня вот так в конфиге:
  output: {
    path: resolve(__dirname, '..', 'dist'),
    filename: '[name].js',
    publicPath: '/',
    pathinfo: false,
  },
урл к картинке указан так:
<img src="/images/1.jpg" />

картинка лежит в папке:
 resolve(__dirname, '..', 'dist'),

лоадер для работы в таком случае нужен или нет? Я так понимаю, что нет. Или ошибаюсь?
проверь на существование и опечатки имя директории и файла
08:25:08 ДП
User 107340798
User 32530886
лоадер нужен для require и import
так и рассуждал, тогда что не так в моем конфиге, почему картинки не отображаются на dev сервере?
08:25:25 ДП
User 52321317
У тебя  React?
08:26:05 ДП
User 32530886
User 107340798
так и рассуждал, тогда что не так в моем конфиге, почему картинки не отображаются на dev сервере?
скинь в гист свой конфиг целиком
08:26:15 ДП
User 156805060
а кто нибудь сталкивался с траблом, что листенеры после билда в девтулсах указывают в jquery например, а не на то место, где собственно они были поставлены?)
08:26:35 ДП
User 156805060
сурсмапы при этом пашут нормально
08:26:51 ДП
User 32530886
я сталкивался, попробуй другой тип сорсмапов в дев-сборке
08:27:32 ДП
User 156805060
ща попробуем
08:28:04 ДП
User 107340798
User 32530886
скинь в гист свой конфиг целиком
да, сейчас сделаю
08:29:33 ДП
User 52321317
Мне помог в таком случае "cheap-module-eval-source-map"
08:34:30 ДП
User 156805060
User 52321317
Мне помог в таком случае "cheap-module-eval-source-map"
чет не прокнуло
08:34:52 ДП
User 52321317
у тебя для билда другой конфиг?
08:35:10 ДП
User 156805060
всмысле
08:35:27 ДП
User 52321317
Ну всмысле, у некоторых один конфиг под дев, второй под билд
08:35:34 ДП
08:36:07 ДП
User 52321317
и в деве все работает норм?
08:36:12 ДП
User 52321317
а в билде едет?
08:36:31 ДП
User 156805060
не, везде
08:40:54 ДП
User 107340798
User 32530886
скинь в гист свой конфиг целиком
https://github.com/altiore/webpack_config_example/tree/router вот здесь мой конфиг
github.com/altiore/webpack_config_example/tree/router
webpack_config_example - Webpack Config Example
08:41:23 ДП
User 107340798
картинки лежат в папках dist и static (и там и там одни и те же) но dev сервер их не подхватывает
08:41:44 ДП
User 107340798
@sergeysova Это, кстити, процентов на 80 твой конфиг
08:43:49 ДП
User 32530886
@Razzwan уже смотрю
08:44:03 ДП
User 107340798
User 32530886
@Razzwan уже смотрю
секунду.
08:44:32 ДП
User 107340798
User 32530886
@Razzwan уже смотрю
можно
08:44:38 ДП
User 107340798
последние изменения добавил.
08:44:54 ДП
User 32530886
в мастер?
08:44:56 ДП
User 32530886
запушил?
08:45:33 ДП
User 32530886
какая ветка?
08:45:43 ДП
08:48:58 ДП
User 42417801
User 32530886
какая ветка?
Позволю себе оффтоп, что за шелл/конфиг?
08:49:46 ДП
User 52321317
zsh вроде
08:49:52 ДП
User 32530886
User 42417801
Позволю себе оффтоп, что за шелл/конфиг?
zsh + oh-my-zsh + POWERLEVEL9K

https://github.com/LestaD/.dotfiles/blob/master/zshrc
github.com/LestaD/.dotfiles/blob/master/zshrc
Contribute to .dotfiles development by creating an account on GitHub.
08:50:05 ДП
08:51:26 ДП
User 32530886
@Razzwan я сейчас выкачал и там нет директории static и dist
08:51:28 ДП
User 32530886
и картинок нет
08:51:34 ДП
User 32576495
Наверное глупый вопрос, однако когда и где стоить применять webpack. 
К примеру я занимаюсь по большей части версткой. Использую TARS (gulp + webpack и много других плюшек).
Когда верстка это просто верстка, а не app или spa. Стоит ли использовать ? 
Проблемы которые я встречаю переодически при передачи верстки. 
1. Вызов функий вне bandle ( к примеру программист бекенда хочет вызвать функцию открытия/закрытия модалки)
2. Переинциализация скрипта галереи ( swiper + lightbox + кастомный код ). 
3. Использование CDN. Суть в том что подключаются к примеру 5-10 библиотек, стили библиотек кастомяться из исходников ( из npm_modules тяну миксины, переменны и т.д.), как быть в таком случае когда твой js в бандл должен взаимодействовать с библиотеками из CDN. В идеале конечнчо хотелось бы просто устанавливать модули рекварить их, в бандл не сувать эти библиотеки, а раскидывать их например на файлы jquery.js, swiper.js и т.д. В верстке подключать через CDN и fallcback на локальный эти файлы. 

Вот после таких моментов задумываешься зачем эта сложность с require? Стоит ли его тут использовать или просто через gulp делать таски склеивание и тогда все функции, переменные и т.д. Будут доступны из вне ? Или я чтото упускаю ?
08:52:37 ДП
User 32530886
User 32576495
Наверное глупый вопрос, однако когда и где стоить применять webpack. 
К примеру я занимаюсь по большей части версткой. Использую TARS (gulp + webpack и много других плюшек).
Когда верстка это просто верстка, а не app или spa. Стоит ли использовать ? 
Проблемы которые я встречаю переодически при передачи верстки. 
1. Вызов функий вне bandle ( к примеру программист бекенда хочет вызвать функцию открытия/закрытия модалки)
2. Переинциализация скрипта галереи ( swiper + lightbox + кастомный код ). 
3. Использование CDN. Суть в том что подключаются к примеру 5-10 библиотек, стили библиотек кастомяться из исходников ( из npm_modules тяну миксины, переменны и т.д.), как быть в таком случае когда твой js в бандл должен взаимодействовать с библиотеками из CDN. В идеале конечнчо хотелось бы просто устанавливать модули рекварить их, в бандл не сувать эти библиотеки, а раскидывать их например на файлы jquery.js, swiper.js и т.д. В верстке подключать через CDN и fallcback на локальный эти файлы. 

Вот после таких моментов задумываешься зачем эта сложность с require? Стоит ли его тут использовать или просто через gulp делать таски склеивание и тогда все функции, переменные и т.д. Будут доступны из вне ? Или я чтото упускаю ?
вебпак необходимо использовать когда ты пишешь приложение с кучей файлов с es6 или commonjs модулями
когда тебе нужно из директории с файлами сделать корректно работающий один

цельное приложение
08:52:43 ДП
User 107340798
User 32530886
и картинок нет
в гитигноре были. Запушил static
08:53:07 ДП
User 32530886
User 107340798
в гитигноре были. Запушил static
вообще тебе нужен лоадер, чтобы их руками не копировать
08:53:27 ДП
User 32530886
и с помощью лоадера ты сможешь `import image from 'imageName.jpg'
и затем <img src={image} />
08:53:36 ДП
User 32576495
User 32530886
вебпак необходимо использовать когда ты пишешь приложение с кучей файлов с es6 или commonjs модулями
когда тебе нужно из директории с файлами сделать корректно работающий один

цельное приложение
Тогда логичнее отказаться от идеи использование webpack в моем случае, я правильно понимаю ?
08:53:37 ДП
User 32530886
можешь потом и хеши проставлять и сжимать на лету
08:54:23 ДП
User 32530886
User 32576495
Наверное глупый вопрос, однако когда и где стоить применять webpack. 
К примеру я занимаюсь по большей части версткой. Использую TARS (gulp + webpack и много других плюшек).
Когда верстка это просто верстка, а не app или spa. Стоит ли использовать ? 
Проблемы которые я встречаю переодически при передачи верстки. 
1. Вызов функий вне bandle ( к примеру программист бекенда хочет вызвать функцию открытия/закрытия модалки)
2. Переинциализация скрипта галереи ( swiper + lightbox + кастомный код ). 
3. Использование CDN. Суть в том что подключаются к примеру 5-10 библиотек, стили библиотек кастомяться из исходников ( из npm_modules тяну миксины, переменны и т.д.), как быть в таком случае когда твой js в бандл должен взаимодействовать с библиотеками из CDN. В идеале конечнчо хотелось бы просто устанавливать модули рекварить их, в бандл не сувать эти библиотеки, а раскидывать их например на файлы jquery.js, swiper.js и т.д. В верстке подключать через CDN и fallcback на локальный эти файлы. 

Вот после таких моментов задумываешься зачем эта сложность с require? Стоит ли его тут использовать или просто через gulp делать таски склеивание и тогда все функции, переменные и т.д. Будут доступны из вне ? Или я чтото упускаю ?
в случае использования бандлера, нет смысла тянуть библиотеки из CDN
всё ставится лдокально из npm в node_modules и подключается через require/import
08:54:38 ДП
User 107340798
User 32530886
вообще тебе нужен лоадер, чтобы их руками не копировать
Вообще, они лежат прямо в той папке всегда. Это же одно приложение. В dist они лежат. Руками не нужно копировать. В этом идея. Руками нужно копировать, когда у меня есть картинки, которые не будут использоваться в текущем проекте в той же папке, а у меня нет такого случая
08:55:02 ДП
User 32530886
User 107340798
Вообще, они лежат прямо в той папке всегда. Это же одно приложение. В dist они лежат. Руками не нужно копировать. В этом идея. Руками нужно копировать, когда у меня есть картинки, которые не будут использоваться в текущем проекте в той же папке, а у меня нет такого случая
dist это временная папка
её можно удалить и запустить build снова и всё будет ок
08:55:24 ДП
User 32530886
положи картинки в static
dist руками не трогай
установи loader нужный для картинок
и подключай их через require/import
08:55:27 ДП
User 107340798
User 32530886
и с помощью лоадера ты сможешь `import image from 'imageName.jpg'
и затем <img src={image} />
я видел, что так можно, но это лишнее
08:55:45 ДП
User 107340798
User 32530886
положи картинки в static
dist руками не трогай
установи loader нужный для картинок
и подключай их через require/import
а по-другом, никак?
08:55:58 ДП
User 32530886
User 107340798
а по-другом, никак?
это как раз таки самый правильный способ
08:56:36 ДП
User 107340798
User 32530886
это как раз таки самый правильный способ
просто, потом получится, что нужно еще будет заботиться о том, чтоб они правильно скопировались.
08:58:02 ДП
User 32530886
User 107340798
просто, потом получится, что нужно еще будет заботиться о том, чтоб они правильно скопировались.
это лоадер сделает
Да и настроить один раз, потом всё будет ок
09:00:17 ДП
User 107340798
User 32530886
это лоадер сделает
Да и настроить один раз, потом всё будет ок
если бы все вот так само происходило, я бы не возился с webpack-ом уже больше 2х месяцев. Слишком много инструмент, который "настроил и забыл" на себя времени забирает.
09:00:43 ДП
User 107340798
Может, конечно, просто с моим мозгом что-то не так, и у остальных все проще...
09:04:31 ДП
User 107340798
User 32530886
это лоадер сделает
Да и настроить один раз, потом всё будет ок
да, спасибо. С лоадером получилось. Только это сложнее, чем можно было сделать.
09:06:19 ДП
User 107340798
Ну вот, все-таки нужно отдельно настраивать, чтоб картинки копировались
09:06:26 ДП
User 107340798
при билде
09:07:40 ДП
User 32530886
с лоадером не нужно
09:07:44 ДП
User 32530886
для этого же и лоадер
09:08:15 ДП
User 107340798
User 32530886
для этого же и лоадер
для того, чтоб картинки отобразились в dev сервере - нужен лоавер url-loader
09:08:33 ДП
User 107340798
для того, чтоб картинки скопировались в статическую папку, нужен file-loader
09:10:48 ДП
User 32530886
я вот сейчас портирую проект с первого вебпака на второй
по ходу обновляю все все зависимости
09:10:50 ДП
User 32530886
будет весело
09:11:42 ДП
User 107340798
User 32530886
будет весело
разработка - это всегда весело
09:12:11 ДП
User 107340798
когда неделю возишся с настройками конфигураций, а клиенту нужно всего лишь, чтоб на страничке был нужный текст и нужный функционал.
09:14:13 ДП
User 107340798
благо, получилось. Сейчас запушу конфиг, с которым все работает. Правда, возможно, будут траблы со статической генерацией. С ней всегда траблы, если что-то добавляешь.
09:14:54 ДП
User 712443
Привет
09:15:08 ДП
User 712443
Кто настраивал webpack 2 так, что бы работал HMR(для реакта обязательно), при условии, что бек не на ноде. т.е. нода должна быть прослойкой между беком, который есть и фронтом. я что то кручу-верчу, но ничего не выходит.
есть у кого репа под рукой с подобной реализацией, чтобы увидеть конкретный пример?
09:15:42 ДП
User 107340798
User 712443
Кто настраивал webpack 2 так, что бы работал HMR(для реакта обязательно), при условии, что бек не на ноде. т.е. нода должна быть прослойкой между беком, который есть и фронтом. я что то кручу-верчу, но ничего не выходит.
есть у кого репа под рукой с подобной реализацией, чтобы увидеть конкретный пример?
я вопрос не понял, что значит HMR?
09:15:52 ДП
User 52321317
Hot Module Replacement
09:15:56 ДП
09:16:26 ДП
User 52321317
Я настраивал, но не понимаю, что там сложного
09:16:26 ДП
User 712443
бек у меня .net, хочу HMR, но не выходит настроить
09:16:46 ДП
User 52321317
У нас запускается сервер на отдельном порту в дев-режиме (5001 порт)
09:16:51 ДП
User 52321317
а фронт запускается как обычно
09:16:56 ДП
User 712443
у меня 3 порта
09:17:00 ДП
User 52321317
и коннектится по XHR к серву
09:17:06 ДП
User 52321317
и по WS
09:17:12 ДП
User 107340798
User 712443
Кто настраивал webpack 2 так, что бы работал HMR(для реакта обязательно), при условии, что бек не на ноде. т.е. нода должна быть прослойкой между беком, который есть и фронтом. я что то кручу-верчу, но ничего не выходит.
есть у кого репа под рукой с подобной реализацией, чтобы увидеть конкретный пример?
https://github.com/altiore/webpack_config_example
github.com/altiore/webpack_config_example
webpack_config_example - Webpack Config Example
09:17:23 ДП
User 107340798
вот, как раз сейчас вожусь. hot module работает
09:17:27 ДП
User 107340798
Спасибо @sergeysova
09:28:47 ДП
User 107340798
Кстати, использование url-loader при загрузке картинок, как не странно, сэкономило ресурсы - и итоговый js файл получился меньше. Необъяснимо, но факт.
09:38:16 ДП
User 42417801
Файл был загзипован?
Возможно из-за этого
09:58:50 ДП
User 107340798
User 42417801
Файл был загзипован?
Возможно из-за этого
в смысле, ты имеешь в виду, что он был добавлен в javascript файл? хм...
01:14:03 ПП
User 712443
http://clip2net.com/s/3I6cdq2
как убрать лишнее? мне нужно знать, что вебпак жив, но инфа которая сейчас лишняя.
флаг devServer.noInfo не подходит, из-за него вообще инфы нет, что вебпак в процессе сборки...
clip2net.com/s/3I6cdq2
Clip2net — most popular image sharing tool
01:25:24 ПП
User 32530886
скинь конфиг гистом
01:29:04 ПП
User 712443
https://gist.github.com/ess3nt/b12e05eb69796b835c2194c7ed8d50b1
gist.github.com/ess3nt/b12e05eb69796b835c2194c7ed8d50b1
01:35:03 ПП
User 32530886
https://webpack.js.org/configuration/
01:35:23 ПП
User 32530886
вот посмотри
https://webpack.js.org/configuration/stats/
01:35:56 ПП
User 712443
спасибо, сейчас гляну
02:52:17 ПП
User 107340798
подскажите готовую сборку для webpack, которая умеет генерировать группу статических файлов из react-router маршрутов?
03:03:20 ПП
03:03:28 ПП
User 32530886
я себе такую костылями написал))
03:03:33 ПП
User 32530886
только что
03:07:04 ПП
User 32530886
@Razzwan https://lestad.top/
sergeysova.com
Hello, i am a web-developer. LestaD is my nickname in IT-sphere.
03:07:08 ПП
User 32530886
вот так в итоге выглядит
03:24:15 ПП
User 107340798
User 32530886
вот так в итоге выглядит
красиво
04:18:51 ПП
User 32530886
User 107340798
красиво
Спасибо