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

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

974 members

Архив канала @webpack_ru 19 октября 2017 г.

02:09:59 ПП
User 65587904
Привет всем, сталкивался ктонибудь с проблемой, когда лоадер ищет нужные ему модули в корневой дирректории проекта?
02:10:04 ПП
02:35:36 ПП
User 32530886
User 65587904
ничего не понятно из картинки
03:05:01 ПП
User 100243492
Привет! Использую вебпак, к нему hotreload, и два файла для клиента и сервера. Теперь подвох, при сборке вебпаком с параметром  production,  все проходит норм, а если под дев ключОм, сыпется на ошибке с PNG файлами, сами картинки нормальные, рендерятся, а вебпак пытается их пережевать
03:05:45 ПП
User 100243492
Какой день бьюсь, все ничего... и в добавок, если раньше менял конфиг, что-то еще ладно работало, и реагировало, сейчас хоть всякую хню пишу в конфиг, а ему насрать
03:09:52 ПП
User 52321317
Может, у тебя два конфига?)
03:15:19 ПП
User 100243492
https://paste.kde.org/pukcbidf1
03:15:29 ПП
07:11:06 ПП
User 48374496
Добрый вечер коллеги!
Есть небольшой вопрос, буду очень благодарен если кто подскажет.
Имеются JSники, которые собираются в бандл.
А так же есть статический JSник, который не надо прогонять через вебпак (оставить as-is), но при этом надо подключить в шаблон html, либо напрямую прописав линку, либо как-то через html-webpack-plugin (он используется в сборке), но возник вопрос - как это правильно сделать, чтобы пути автоматом подхватывались и при dev и при prod?
Заранее спасибо, всем успехов!
07:32:32 ПП
User 242946344
User 48374496
Добрый вечер коллеги!
Есть небольшой вопрос, буду очень благодарен если кто подскажет.
Имеются JSники, которые собираются в бандл.
А так же есть статический JSник, который не надо прогонять через вебпак (оставить as-is), но при этом надо подключить в шаблон html, либо напрямую прописав линку, либо как-то через html-webpack-plugin (он используется в сборке), но возник вопрос - как это правильно сделать, чтобы пути автоматом подхватывались и при dev и при prod?
Заранее спасибо, всем успехов!
Может есть разница в конфигах между дев и прод версиями и нужно выбирать конфиг в зависимости от окружения? Или нет?
07:35:45 ПП
User 300024
User 48374496
Добрый вечер коллеги!
Есть небольшой вопрос, буду очень благодарен если кто подскажет.
Имеются JSники, которые собираются в бандл.
А так же есть статический JSник, который не надо прогонять через вебпак (оставить as-is), но при этом надо подключить в шаблон html, либо напрямую прописав линку, либо как-то через html-webpack-plugin (он используется в сборке), но возник вопрос - как это правильно сделать, чтобы пути автоматом подхватывались и при dev и при prod?
Заранее спасибо, всем успехов!
Если я вас правильно понял, то вам нужен этот плагин https://github.com/DustinJackson/html-webpack-inline-source-plugin
или вот этот
https://github.com/jharris4/html-webpack-include-assets-plugin
github.com/DustinJackson/html-webpack-inline-source-plugin
html-webpack-inline-source-plugin - Embed javascript and css source inline when using the webpack dev server or middleware
07:44:58 ПП
User 48374496
@rlaax да, второй плагин кажется то что нужно. Большое спасибо!
Когда поменяю конфиги, изменю это сообщение, указав сработало или нет (мало-ли кто-то через поиск будет искать).
07:48:04 ПП
User 300024
@TemaSM на всякий случай прочитайте эту доку (другой плагин)
https://github.com/SimenB/add-asset-html-webpack-plugin
любой из трех скорее всего вам подойдет, но тут в доке сразу видно что будет в хтмлке
P.S. просто лень тесткейс поднимать
github.com/SimenB/add-asset-html-webpack-plugin
add-asset-html-webpack-plugin - Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin
07:50:30 ПП
User 121757508
Парни, а это нормально что бандл js (без css), скомпиленный для продакшена весит 2МБ?
Из библиотек vue, element-ui, bootstrap, axios
07:50:56 ПП
User 48374496
@rlaax Да, вот этот кажется самый оптимальный вариант, перепробую все чтобы изучить и знать когда лучше всего применять и какие плюсы/минусы. Премного благодарен!
07:55:54 ПП
User 48374496
@yakimka Да, что-то сликшом жирно 2Мб. Попробуйте выгрузить файл статистики вебпака и посмотреть что там оказалось в бандле, при помощи этих сервисов:
https://chrisbateman.github.io/webpack-visualizer/
https://webpack.github.io/analyse/

webpack --profile --json > stats.json
или в конфиге:
stats: "verbose" (https://webpack.js.org/configuration/stats/)
07:56:08 ПП
User 300024
@yakimka а вы его собрали? скомплили для продакшена? посмотрели лог вебпака (или что там у вас)? вот вам для прикидки
https://bundlephobia.com/
bundlephobia.com
Find the performance impact of adding a npm package to your bundle.
07:56:26 ПП
User 121757508
User 48374496
@yakimka Да, что-то сликшом жирно 2Мб. Попробуйте выгрузить файл статистики вебпака и посмотреть что там оказалось в бандле, при помощи этих сервисов:
https://chrisbateman.github.io/webpack-visualizer/
https://webpack.github.io/analyse/

webpack --profile --json > stats.json
или в конфиге:
stats: "verbose" (https://webpack.js.org/configuration/stats/)
спасибо, сейчас посмотрю
07:57:03 ПП
User 48374496
@rlaax спасибо за ссылочку, закинул в избранные ✌🏻
07:57:55 ПП
User 300024
@TemaSM пожалуйста
но ведь в 2к17 не жалко трафика юзера, мегабайт туда, мегабайт сюда 😂
07:59:22 ПП
User 121757508
User 300024
@TemaSM пожалуйста
но ведь в 2к17 не жалко трафика юзера, мегабайт туда, мегабайт сюда 😂
но ведь мобильные юзеры(
07:59:56 ПП
User 121757508
User 300024
@yakimka а вы его собрали? скомплили для продакшена? посмотрели лог вебпака (или что там у вас)? вот вам для прикидки
https://bundlephobia.com/
bundlephobia.com
Find the performance impact of adding a npm package to your bundle.
по этому сервису получается около 700 кб
07:59:57 ПП
User 48374496
Аха именно, буквально пару часов назад одному товарищу, связанному с крупными заказчиками, пытался объяснить что такие зависимости как фреймворки (напр. Bootstrap) надо минифицировать на выходе. А он ни в какую. Требует чтобы кодеру предоставлялись полные открытые исходники 🤦‍♂️
08:04:04 ПП
User 121757508
упс, проверил конфиг - забыл подключить uglifyjs)
08:04:11 ПП
User 121757508
но за сервисы спасибо)
08:04:47 ПП
User 121757508
получилось как раз ~800 кб
08:42:43 ПП
08:49:16 ПП
09:01:13 ПП
User 122824793
User 300024
@yakimka а вы его собрали? скомплили для продакшена? посмотрели лог вебпака (или что там у вас)? вот вам для прикидки
https://bundlephobia.com/
bundlephobia.com
Find the performance impact of adding a npm package to your bundle.
прикольный проект)
09:11:03 ПП
User 121757508
а есть смысл применять gzip? В смысле нюансов никаких от сжатия не будет?
10:51:56 ПП
User 48374496
@rlaax Спасибо, html-webpack-include-assets-plugin помог.
Заодно там багу нашел, закинул PR. Годный плагин 👍🏻
10:51:56 ПП
User 48374496
Если я вас правильно понял, то вам нужен этот плагин https://github.com/DustinJackson/html-webpack-inline-source-plugin
или вот этот
https://github.com/jharris4/html-webpack-include-assets-plugin
github.com/DustinJackson/html-webpack-inline-source-plugin
html-webpack-inline-source-plugin - Embed javascript and css source inline when using the webpack dev server or middleware