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

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

974 members

Архив канала @webpack_ru 5 января 2018 г.

07:26:26 ДП
User 3893433
Ребят почему порядок вставки стилей в webpack  может изменяться? Почему-то стили из дочернего компонента оказались выше глобальных стилей, которые грузятся в корневом компоненте. С чего начать расследование? :)
07:28:16 ДП
User 212795634
С конфига
08:49:15 ДП
User 30260375
User 3893433
Ребят почему порядок вставки стилей в webpack  может изменяться? Почему-то стили из дочернего компонента оказались выше глобальных стилей, которые грузятся в корневом компоненте. С чего начать расследование? :)
Так может дочерний компонент импортировал раньше глобальных стилей?
08:50:47 ДП
User 3893433
@worldxaker да так оно и оказалось, там длинная цепочка импортов выше испорта глобальных стилей оказалась, починил переместив импорт глобальных стилей выше
09:03:14 ДП
User 96766531
Всем привет! =)
Я использую webpack 3.1 в проекте на react. 
Запускаю в окружении dev скриптом npm start.
Для изоляции стилей решила использоваться CSS модули.
Но столкнулась с проблемой, что у меня не получается применить стили сторонних компонент, я их пыталась импортировать и внутри стилей отдельной компоненты, как 
@import '../../../node_modules/react-datepicker/dist/react-datepicker.css';
и внтури самой компоненты 
import 'react-datepicker/dist/react-datepicker.css'; 
Но стили никак не подцепляются. Ошибок в консоли нет.
Я пыталась использовать и webpack-combine-loaders, но все равно не работает.

Подскажите, пожалуйста, где я что-то делаю не так?

Часть моего конфига.
{
  test: /(\.css|\.scss|\.sass)$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[local]___[hash:base64:8]',
        sourceMap: true
      }
    }, 
    {
      loader: 'sass-loader',
      options: {
        includePaths: [path.resolve(__dirname, 'src', 'scss')],
        sourceMap: true
      }
    }
  ]
}
09:49:27 ДП
User 212795634
у кого-нибудь работают алиасы вебпака в webpack-dev-middleware?
09:54:26 ДП
User 60331718
User 212795634
у кого-нибудь работают алиасы вебпака в webpack-dev-middleware?
в каком плане?
09:54:37 ДП
User 60331718
для вью - работали и работают
09:55:21 ДП
User 212795634
User 60331718
в каком плане?
Ну у меня работают в обычном режиме и в дев сервере, а в експресс мидлваре нет
09:56:15 ДП
User 60331718
User 212795634
Ну у меня работают в обычном режиме и в дев сервере, а в експресс мидлваре нет
а почему она должна работать? у тебя эспресс мидлварь через вебпак собирается тоже?
09:56:56 ДП
User 212795634
User 60331718
а почему она должна работать? у тебя эспресс мидлварь через вебпак собирается тоже?
Да
09:57:11 ДП
User 212795634
Но там тоже прописаны алиасы
09:57:24 ДП
User 212795634
В конфиге который бандл с мидлварью собирает
09:57:55 ДП
User 60331718
тогда хз 🤷‍♂️
09:58:07 ДП
User 212795634
Вернее там один базовый и он мерджися
09:58:10 ДП
User 212795634
Да вот тоже
09:58:19 ДП
User 212795634
Сср ето такая ебала
09:58:58 ДП
User 60331718
User 212795634
Сср ето такая ебала
+
09:59:13 ДП
User 60331718
я тож с ssr сейчас ебусь
09:59:24 ДП
User 60331718
и тоже по серверной части
09:59:50 ДП
User 212795634
Главное без мидлвары норм все, но браузер не релоадится после пересборки
10:12:59 ДП
User 60331718
так, как в babel-loader пропихнуть 1 файл .esm.js из node_modules?
10:13:35 ДП
10:13:35 ДП
10:13:36 ДП
10:15:53 ДП
User 280269138
кто-то проходил udacity nanodegree react?
10:17:39 ДП
User 212795634
User 280269138
кто-то проходил udacity nanodegree react?
@react_js
12:37:08 ПП
User 111816761
как выделить модули кот есть во всех чанках в отдельный чанк?
12:37:34 ПП
User 60331718
User 111816761
как выделить модули кот есть во всех чанках в отдельный чанк?
Magic string в импорте веб пака
12:38:30 ПП
User 111816761
что еще за магикал строка
12:38:35 ПП
User 60331718
Типо import(/* chankName: 'my-pack-chank' */'my-pack')
12:39:24 ПП
User 60331718
https://medium.com/faceyspacey/how-to-use-webpacks-new-magic-comment-feature-with-react-universal-component-ssr-a38fd3e296a
medium.com/faceyspacey/how-to-use-webpacks-new-magic-comment-feature-with-react-universal-component-ssr-a38fd3e296a
Webpack 2.4.0, which came out a few weeks ago, launched with a very interesting new feature: “magic comments.” In combination with dynamic…
12:40:12 ПП
User 111816761
вообще я думал это в CommonsChunkPlugin сделать
01:14:32 ПП
User 111816761
а можно как-то определять имена чанков, которые создаются для динамических импортов?
01:42:59 ПП
User 147771380
User 111816761
а можно как-то определять имена чанков, которые создаются для динамических импортов?
Их можно задать
01:43:04 ПП
User 147771380
Комментарием
01:43:36 ПП
User 111816761
как это сделать?
01:44:07 ПП
01:44:47 ПП
User 111816761
лол, чет я в глаза долблюсь
01:46:01 ПП
User 147771380
https://github.com/webpack/webpack/pull/4573
github.com/webpack/webpack/pull/4573
What kind of change does this PR introduce? Feature Did you add tests for your changes? Yes. Added tests in test/cases/chunks/named-chunks/ . If relevant, link to documentation update: N/A Summary ...
01:46:47 ПП
User 147771380
https://webpack.js.org/guides/code-splitting/
01:50:01 ПП
User 212795634
Нормальный такой чатик конечно
01:50:08 ПП
User 212795634
Тупо для разжева доки
01:50:22 ПП
User 111816761
и где это в доке?
01:50:26 ПП
User 212795634
А по серьезным вопросам никто ниче не знает
01:50:38 ПП
User 212795634
User 111816761
и где это в доке?
Выше ссылка лол
01:50:55 ПП
User 111816761
бляяяяяяяяя
01:51:11 ПП
User 111816761
как-то день сегодня не задался
01:51:54 ПП
User 60331718
User 212795634
Нормальный такой чатик конечно
Ты то справился со своей траблой?
01:52:02 ПП
01:52:07 ПП
User 60331718
Я тож
02:11:07 ПП
User 212795634
User 60331718
path.resolve(__dirname, 'node_modules/apipie/dist')
Пробовал?
02:11:34 ПП
User 60331718
User 212795634
path.resolve(__dirname, 'node_modules/apipie/dist')
Пробовал?
Пробовал
02:11:49 ПП
User 212795634
Прост из доки пример
02:12:01 ПП
User 60331718
Но чет не сработало
02:12:23 ПП
User 60331718
Такое ощущение, что я не правильно понимает конвейер формирования дерева зависимостей и транспиляции
04:23:31 ПП
User 55943427
Всем привет. Такой вопрос. У меня мультиязычный мультидоменный сайт на реакте, с чуть разными темами под домены (в рамках цветов). Тема регулируется в жс-файлике конфига. Используется css modules. Как-то можно в сцсс импортить путь из конфига? То есть передавать переменную из жса в сцсс.
04:29:05 ПП
User 55943427
или на этапе сборки спарсить текст и подставить нужное, и не морочить голову?
05:11:50 ПП
User 97102774
User 55943427
Всем привет. Такой вопрос. У меня мультиязычный мультидоменный сайт на реакте, с чуть разными темами под домены (в рамках цветов). Тема регулируется в жс-файлике конфига. Используется css modules. Как-то можно в сцсс импортить путь из конфига? То есть передавать переменную из жса в сцсс.
Зачем?
05:12:12 ПП
User 55943427
User 97102774
Зачем?
а как еще переменную из конфига передать?
05:14:14 ПП
User 97102774
User 55943427
а как еще переменную из конфига передать?
Как ты разделяешь темы у себя на проекте? В каждом компоненте по файлику на каждую тему?
05:15:48 ПП
User 55943427
есть общая папка theme, в ней layout, links, buttons, прочая, прочая, и файлы с цветами theme-green-colors, theme-orange-colors. Из нее нужные куски импортятся в модули
05:18:50 ПП
User 97102774
User 55943427
есть общая папка theme, в ней layout, links, buttons, прочая, прочая, и файлы с цветами theme-green-colors, theme-orange-colors. Из нее нужные куски импортятся в модули
Я бы на твоём месте делал через require, чтобы код tree-shaking'ом выпиливался лишний.
05:19:07 ПП
User 76662447
Мысь "и как мне всё это запихнуть в цсс?!?" — первый сигнал для css-in-js)
05:19:09 ПП
User 97102774
Я не уверен, что из конфига значения будут инлвйниться.
05:19:23 ПП
User 97102774
User 76662447
Мысь "и как мне всё это запихнуть в цсс?!?" — первый сигнал для css-in-js)
Фэ, изыди)
05:20:50 ПП
User 55943427
User 76662447
Мысь "и как мне всё это запихнуть в цсс?!?" — первый сигнал для css-in-js)
нет. Мне перфоманс очень важен. Кешировать все вусмерть. Никакого инлайна.
05:22:05 ПП
User 97102774
User 55943427
нет. Мне перфоманс очень важен. Кешировать все вусмерть. Никакого инлайна.
Твоя проблема решается thee shaking'ом.
05:22:42 ПП
User 76662447
User 55943427
нет. Мне перфоманс очень важен. Кешировать все вусмерть. Никакого инлайна.
1) Это не инлайн
2) Нет, вообще не инлайн
3) Серьезно, я тоже думал, что это инлайн — это не он
4) Рендеринг напрямую в CSSOM по эффективности вполне посоперничает с результатом выхода препроцессоров с их типичными тоннами селекторов
05:23:32 ПП
User 97102774
User 76662447
1) Это не инлайн
2) Нет, вообще не инлайн
3) Серьезно, я тоже думал, что это инлайн — это не он
4) Рендеринг напрямую в CSSOM по эффективности вполне посоперничает с результатом выхода препроцессоров с их типичными тоннами селекторов
Поэтому давай перепишет полностью проект?)
05:24:39 ПП
User 76662447
Да не, просто хочу напомнить об альтернативах)
05:26:12 ПП
User 55943427
User 76662447
1) Это не инлайн
2) Нет, вообще не инлайн
3) Серьезно, я тоже думал, что это инлайн — это не он
4) Рендеринг напрямую в CSSOM по эффективности вполне посоперничает с результатом выхода препроцессоров с их типичными тоннами селекторов
это хорошо. Но все равно на каждой странице пользователь будет грузить большой кусок одних и тех же стилей каждый раз. У меня рынок Нигерия, и прочая Африка, помимо всего остального. Там интернет золотой.
05:29:49 ПП
User 76662447
Ну тут идея в том, что можно делать кодсплиттинг строго по компонентам и даже по зонам видимости, есть у тебя в critical path три класса — при первом открытии сайта будет грузиться три класса и ни йотой больше (политика кэширования — такая же как для любого другого жс кода, его же тоже не обязательно каждый раз грузить)
05:30:20 ПП
User 55943427
User 76662447
Ну тут идея в том, что можно делать кодсплиттинг строго по компонентам и даже по зонам видимости, есть у тебя в critical path три класса — при первом открытии сайта будет грузиться три класса и ни йотой больше (политика кэширования — такая же как для любого другого жс кода, его же тоже не обязательно каждый раз грузить)
цсс модули делают примерно вот это же. Но только с человеческим экспортом и кешом
05:30:48 ПП
User 55943427
и возможностью выпилить статику куда-то в цдн
05:32:59 ПП
User 76662447
Две сущности — стили и код по прежнему больше чем одна)

Плюс в процессе интеграции кстати оказывается, что многие классы заменяются одной функцией, так как просто ничего не нужно никуда прокидывать
05:37:48 ПП
User 55943427
так, я столкнулась с адептом )
05:37:53 ПП
User 55943427
у кого-то есть другие идеи?
05:38:33 ПП
User 97102774
Да. Прочитай выше.