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

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

974 members

Архив канала @webpack_ru 4 апреля 2018 г.

12:42:35 ДП
User 369209409
Привет!
12:45:37 ДП
User 369209409
Парни у меня есть маленькое web приложение. Я стараюсь понять webpack. Всё что я понимаю это то что он компилит ES2015 в обычный js который понимают браузеры.
12:46:07 ДП
User 369209409
Как в rails приложении подключать js который был откомтпилен ?
12:46:46 ДП
User 369209409
В данный момент у меня всё валится в public/vue/*
05:04:49 ДП
User 122087672
User 369209409
Парни у меня есть маленькое web приложение. Я стараюсь понять webpack. Всё что я понимаю это то что он компилит ES2015 в обычный js который понимают браузеры.
это делает не вебпак. вебпак - это инструмент сборки, а трансформирует бабель
05:05:29 ДП
User 122087672
User 369209409
Как в rails приложении подключать js который был откомтпилен ?
с рельсами лучше использовать webpacker и подключать через javascript_pack_tag
05:16:20 ДП
User 39232169
User 369209409
Парни у меня есть маленькое web приложение. Я стараюсь понять webpack. Всё что я понимаю это то что он компилит ES2015 в обычный js который понимают браузеры.
webpack раскрывает import/export. Остальное делает babel.

например у тебя есть такой модуль
const double = (x) => x * 2;
export double;

то после babel он станет таким
var double = function (x) { return x * 2; }:
export double;

затем вебпак уже объединит модули в один файл
06:12:57 ДП
User 212795634
User 369209409
Как в rails приложении подключать js который был откомтпилен ?
Вебпак генерирует хэш в имени файла?
08:29:36 ДП
User 97081120
Здесь таким никто не занимается
09:37:24 ДП
User 187983007
всем привет! Ребят, можно как-то одновременно на 2-х портах localhost разрабатывать 2 разных приложения, при чем 1-й бандл запрашивать во 2-м приложении? Чтобы на обоих при чем работал live reload.
09:50:13 ДП
User 135278254
два проекта, два разных вебпак конфига
09:51:01 ДП
User 135278254
а livereload не знаю как получить в таком варианте
10:04:55 ДП
User 187983007
ну да, у меня так и есть, 2 разных проекта с 2-мя конфигами
10:05:08 ДП
User 187983007
просто с 1-го не получается взять бандл 2-го
10:05:27 ДП
User 187983007
который лежить на localhost:3030/bundle.js
10:55:37 ДП
User 25987514
Привет, у кого нибудь были проблемы при использовании babel-plugin-syntax-dynamic-import и соответственно динамических импортов что промис в ie11 undefined, хотя в использовании с async/await или чистым промисом все ок?
10:56:45 ДП
User 25987514
т.е такой пример работает корректно
const testPromise = () => new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve("result");
  }, 4000);
 });


 testPromise()
  .then(() => console.log('DONE'));

 const testAsync = async () => {
  let rainbow = await testPromise();

  console.log('DONE', rainbow)
 };

 testAsync();
10:57:34 ДП
User 25987514
а вот такой нет
import('lib/jquery/jquery-1.9.1/jquery-1.9.1.min.js' /* webpackChunkName: "jQuery" */)
    .then(() => console.log('DONE'))
  .catch(error => 'An error occurred while loading the component');
11:04:12 ДП
User 135278254
User 187983007
просто с 1-го не получается взять бандл 2-го
ты в первом проекте в html подключаешь скрипт который загружается c localhost:3030/bundle.js?
11:31:31 ДП
User 187983007
User 135278254
ты в первом проекте в html подключаешь скрипт который загружается c localhost:3030/bundle.js?
ну и так пробовал и через 
new HtmlWebpackPlugin({
    template: 'index.html'
   }),
   new HtmlWebpackExternalsPlugin({
    externals: [
     {
      module: 'shared',
      entry: 'http://localhost:3030/bundle.js',
      global: 'Shared'
     }
    ]
   }),
11:42:28 ДП
User 287921494
Подскажите плагин, чтобы сконкатенировать легаси js код в один файл
11:43:33 ДП
User 30260375
User 287921494
Подскажите плагин, чтобы сконкатенировать легаси js код в один файл
Cntl+c ctrl+v
11:44:04 ДП
User 287921494
User 30260375
Cntl+c ctrl+v
а если на маке?
11:44:07 ДП
User 97081120
User 287921494
Подскажите плагин, чтобы сконкатенировать легаси js код в один файл
а просто вебпаком пройтись по нему не помогает?
11:44:28 ДП
User 287921494
User 97081120
а просто вебпаком пройтись по нему не помогает?
мне нужен глобальный стек вебпак же каждый файл в модуль превращает
11:44:38 ДП
User 32530886
User 287921494
мне нужен глобальный стек вебпак же каждый файл в модуль превращает
ну вебпак как бы для этого и нужен
11:44:45 ДП
User 32530886
чтобы просто сконкатенировать возьми gulp
11:44:56 ДП
User 287921494
User 32530886
ну вебпак как бы для этого и нужен
ну у меня он и делает это
11:44:59 ДП
User 32530886
или cat *.js > bundle.js
11:45:18 ДП
User 287921494
User 32530886
чтобы просто сконкатенировать возьми gulp
я просто думал галп снести оставить только вебпак
11:45:32 ДП
User 32530886
User 287921494
я просто думал галп снести оставить только вебпак
инструменты для разных задач
11:45:51 ДП
User 32530886
это как имея отвертку и топор, выкинуть один
11:46:22 ДП
User 287921494
User 32530886
инструменты для разных задач
ну я порылся нашел webpack-merge-and-include-globally но с ним не запускается вебпак вообще на watch)
11:46:33 ДП
User 32530886
просто не надо так делать 🙂
11:47:05 ДП
User 97081120
так ты легаси код забандли
11:47:12 ДП
User 97081120
и не трогай его больше
11:47:17 ДП
User 97081120
просто импорти все оттуда
11:47:22 ДП
User 97081120
и постепенно удаляй импорты
11:47:37 ДП
User 287921494
Ладно понял чтопридется переписать все же легаси код :D
11:47:41 ДП
User 97081120
когда не останется ни одного — удаляй
11:47:43 ДП
User 287921494
спасибо)
01:13:38 ПП
User 308402933
а вы как ретину реализуете?
01:13:56 ПП
User 55943427
User 308402933
а вы как ретину реализуете?
свг
01:14:30 ПП
User 308402933
а без свг? все эти @2, @3
01:42:07 ПП
User 97081120
медиаквери пиксели?
01:43:59 ПП
User 212795634
react-retina-image, но там вроде надо пр сделать, чтобы стринговые рефы убрали
01:44:29 ПП
User 308402933
User 212795634
react-retina-image, но там вроде надо пр сделать, чтобы стринговые рефы убрали
а ее можно юзать вне реакта?
01:44:33 ПП
01:44:35 ПП
User 112715267
реакт для ретины
01:44:38 ПП
User 308402933
упс
но спасибо
01:44:41 ПП
User 112715267
ебать
01:54:00 ПП
01:54:07 ПП
User 308402933
вот что мне эта вся херня с ретиной напоминает
01:54:57 ПП
01:55:44 ПП
User 308402933
User 71695919
srcset
видел это свойство, но у меня ie10+ =/
01:55:47 ПП
User 477528844
я думал он ищет плагин для создания @x2 @x3 версий
01:56:29 ПП
User 308402933
User 477528844
я думал он ищет плагин для создания @x2 @x3 версий
мне нужно любым способом прикрутить @x2 и @x3
сами картиночки у меня есть
01:56:35 ПП
User 308402933
но вообще я напряг дизайнера и он выдал свг
01:56:44 ПП
User 308402933
уже просто для себя интерсно разобраться
01:57:01 ПП
User 477528844
User 308402933
мне нужно любым способом прикрутить @x2 и @x3
сами картиночки у меня есть
ну тогда либо srcset, как сказали выше, либо picture
01:57:14 ПП
01:57:37 ПП
User 477528844
я бы заюзал picture, т.к. намного понятнее запись
02:01:15 ПП
User 308402933
окей
спасибо
02:03:44 ПП
User 110047386
Кто использует динамичечкий импорт? В чем плюсы и минусы?
02:07:08 ПП
User 32530886
User 110047386
Кто использует динамичечкий импорт? В чем плюсы и минусы?
обычный импорт и динамический это разные фичи
02:07:20 ПП
User 32530886
динамический импорт имеет свою область применения
02:07:31 ПП
User 139059931
User 110047386
Кто использует динамичечкий импорт? В чем плюсы и минусы?
можно сплитануть чанк, поменять контент, залить куда-нибудь, потом импортнуть не вебпаком и все будет работать... но это не частый кейс
02:08:28 ПП
User 110047386
User 32530886
динамический импорт имеет свою область применения
Где применяют в основном?
02:08:52 ПП
User 32530886
User 110047386
Где применяют в основном?
в подгрузке не частоиспользуемого кода
02:09:04 ПП
User 32530886
к примеру на 2-3 страницах используется тяжеленный редактор
02:09:19 ПП
User 32530886
вебпак засплит код так, что при загрузке других страниц, редактор не будет загружен
02:12:20 ПП
User 139059931
Вот небольшой пример - https://github.com/findify/findify-js/blob/feature/react-components/packages/bundle/src/index.ts в итоге этот файли содержит только promise polyfill и webpack bootstrap, так что его можно просто заинлайнить на странице и он втянет все необходимое сам
github.com/findify/findify-js/blob/feature/react-components/packages/bundle/src/index.ts
findify-js - Findify monorepo
02:17:33 ПП
User 139059931
Ребят, а кто-нибудь делал "горячую" замену модулей в продакшн билде?
02:17:45 ПП
User 55943427
User 477528844
ну тогда либо srcset, как сказали выше, либо picture
хорошая штука, только не поддерживается даже в ие11
02:18:00 ПП
User 212795634
полифилл юзайте
02:19:04 ПП
User 477528844
User 55943427
хорошая штука, только не поддерживается даже в ие11
Есть полифиллы же, для picture точно
02:19:14 ПП
User 477528844
Самому приходилось использовать
03:39:29 ПП
User 369209409
User 212795634
Вебпак генерирует хэш в имени файла?
Да
03:40:14 ПП
User 212795634
User 369209409
Да
заюзай вывод статс, там будет жсон с именем
03:54:10 ПП
User 137673995
Всем привет! Ничуть не стесняюсь заявляю, что я полный нуб в вебпаке. Подскажите зеленому, с чего начать? Какую лит-ру, плейлисты, туториал по вебпаку посоветуете? Большое спасибо за ответ.
03:56:13 ПП
User 313846649
User 137673995
Всем привет! Ничуть не стесняюсь заявляю, что я полный нуб в вебпаке. Подскажите зеленому, с чего начать? Какую лит-ру, плейлисты, туториал по вебпаку посоветуете? Большое спасибо за ответ.
а может ну его этот вебпак, зачем он тебе нужен
03:56:45 ПП
User 137673995
Да вот рвется душа и все тут.
03:57:00 ПП
User 52321317
Документация лучший учебник
03:57:30 ПП
User 61416070
User 137673995
Да вот рвется душа и все тут.
на pinned message канала нажми
03:57:38 ПП
User 54920706
User 137673995
Всем привет! Ничуть не стесняюсь заявляю, что я полный нуб в вебпаке. Подскажите зеленому, с чего начать? Какую лит-ру, плейлисты, туториал по вебпаку посоветуете? Большое спасибо за ответ.
https://www.youtube.com/watch?v=9kJVYpOqcVU
Старое, но доходчиво
youtube.com/watch?v=9kJVYpOqcVU
Webpack has quickly become one of the most popular choices among web developer build tools. It can quickly build, minify, split & do a whole wonder of other ...
03:57:45 ПП
User 313846649
User 137673995
Да вот рвется душа и все тут.
доки и ютуб
03:58:26 ПП
User 137673995
User 54920706
https://www.youtube.com/watch?v=9kJVYpOqcVU
Старое, но доходчиво
youtube.com/watch?v=9kJVYpOqcVU
Webpack has quickly become one of the most popular choices among web developer build tools. It can quickly build, minify, split & do a whole wonder of other ...
Спасибо!
04:23:26 ПП
User 187983007
Ребят, я тут не совсем понял, как в  html-webpack-externals-plugin подключить картинки к доп бандлу?
04:25:14 ПП
User 187983007
там вроде есть externals[].supplements, но если туда прописать такой путь http://localhost:3030/assets/images/, то он ругается
04:49:42 ПП
User 55943427
Шон какеготам снял видосов с туториалами
04:50:46 ПП
User 55943427
http://webpack.academy
webpack.academy
webpack learning academy exists to provide curated, high-quality learning content, devoted to the webpack open source project, meanwhile supporting it at the
05:27:27 ПП
User 187983007
можно как-то в вебпаке прописать в алиасе, чтобы картинки брались с определенного юрл?
ну типа у меня сейчас вот так:
resolve: {
    alias: {
      Images: resolve(__dirname, './src/assets/images/'),
    }
  },
а я хочу вот так:
resolve: {
    alias: {
      Images:"someurl.com/assets/images/",
    }
  },
просто сейчас у картинок путь src="/assets/images/image.png"
а нужно src="someurl.com/assets/images/image.png"
05:35:21 ПП
User 139059931
User 187983007
можно как-то в вебпаке прописать в алиасе, чтобы картинки брались с определенного юрл?
ну типа у меня сейчас вот так:
resolve: {
    alias: {
      Images: resolve(__dirname, './src/assets/images/'),
    }
  },
а я хочу вот так:
resolve: {
    alias: {
      Images:"someurl.com/assets/images/",
    }
  },
просто сейчас у картинок путь src="/assets/images/image.png"
а нужно src="someurl.com/assets/images/image.png"
нет
05:36:08 ПП
User 187983007
User 139059931
нет
а есть ли какой-то воркараунд?
05:39:19 ПП
User 101606096
User 187983007
можно как-то в вебпаке прописать в алиасе, чтобы картинки брались с определенного юрл?
ну типа у меня сейчас вот так:
resolve: {
    alias: {
      Images: resolve(__dirname, './src/assets/images/'),
    }
  },
а я хочу вот так:
resolve: {
    alias: {
      Images:"someurl.com/assets/images/",
    }
  },
просто сейчас у картинок путь src="/assets/images/image.png"
а нужно src="someurl.com/assets/images/image.png"
ну а сделать таск на скачивание локально?
05:39:33 ПП
User 187983007
то есть?
05:47:15 ПП
User 139059931
babel-plugin-download-remote-images
05:47:18 ПП
User 101606096
User 187983007
то есть?
ну хз, wget с аргументом зпускать
05:49:06 ПП
User 187983007
User 139059931
babel-plugin-download-remote-images
нет такого плагина
05:49:45 ПП
User 139059931
И слава богу...
05:51:13 ПП
10:04:24 ПП
User 97269337
форкнул на днях плагин для вебпака, который под вебпак 4 не думали обновлять, да к тому же и он ограничен был функционалом, расширил и говнокод выкинул.
Плагин генерит из иконки все нужные иконки для устройств, + генерит манифест файл для pwa, и все это дело взаимодействует по необходимости с html-webpack-plugin
Может кому будет интересно, пользуйтесь https://github.com/romanlex/app-manifest-webpack-plugin
github.com/romanlex/app-manifest-webpack-plugin
app-manifest-webpack-plugin - Let webpack generate app manifest, all your favicons and icons for you
10:15:36 ПП
User 32530886
User 97269337
форкнул на днях плагин для вебпака, который под вебпак 4 не думали обновлять, да к тому же и он ограничен был функционалом, расширил и говнокод выкинул.
Плагин генерит из иконки все нужные иконки для устройств, + генерит манифест файл для pwa, и все это дело взаимодействует по необходимости с html-webpack-plugin
Может кому будет интересно, пользуйтесь https://github.com/romanlex/app-manifest-webpack-plugin
github.com/romanlex/app-manifest-webpack-plugin
app-manifest-webpack-plugin - Let webpack generate app manifest, all your favicons and icons for you
Спасибо
10:16:32 ПП
User 97269337
User 32530886
Спасибо
Вам всем спасибо:) и тут и в реакт чате и везде 😉
11:46:56 ПП
User 369209409
Парни а что не так ?

vuex.esm.js:266 Uncaught TypeError: Cannot read property 'getters' of undefined
    at vuex.esm.js:266
    at Array.forEach (<anonymous>)
    at assertRawModule (vuex.esm.js:265)
    at ModuleCollection.register (vuex.esm.js:191)
    at vuex.esm.js:205
    at vuex.esm.js:85
    at Array.forEach (<anonymous>)
    at forEachValue (vuex.esm.js:85)
    at ModuleCollection.register (vuex.esm.js:204)
    at new ModuleCollection (vuex.esm.js:165)
11:54:45 ПП
User 189706357
User 369209409
Парни а что не так ?

vuex.esm.js:266 Uncaught TypeError: Cannot read property 'getters' of undefined
    at vuex.esm.js:266
    at Array.forEach (<anonymous>)
    at assertRawModule (vuex.esm.js:265)
    at ModuleCollection.register (vuex.esm.js:191)
    at vuex.esm.js:205
    at vuex.esm.js:85
    at Array.forEach (<anonymous>)
    at forEachValue (vuex.esm.js:85)
    at ModuleCollection.register (vuex.esm.js:204)
    at new ModuleCollection (vuex.esm.js:165)
getters is undefined. написанож. показывай как импортишь их