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

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

974 members

Архив канала @webpack_ru 23 марта 2018 г.

12:00:14 ДП
User 90721916
типа, а че у тебя в /components/system/app нет ниче
12:00:26 ДП
User 90721916
ну, потому что надо в components/ui, ага
12:00:30 ДП
User 90721916
настроил ентри пониты
12:00:37 ДП
User 90721916
entry: {
    vendor: ["react", "react-dom"],
    app: './src/components/app/app.tsx',
    one: './src/uis/one/index.ts',
    two: './src/uis/two/index.ts',
  },
12:00:41 ДП
User 135278254
у тебя {path} - это переменная какая-то?
12:00:43 ДП
12:00:58 ДП
User 90721916
import(uis/${path})
    .then(module  => {
      console.log("MODULE:", module ); блабла
12:01:12 ДП
User 90721916
это работает с entry, что выше
12:01:34 ДП
12:01:40 ДП
User 212795634
Покажи раздел с алиасами
12:02:02 ДП
User 90721916
нет там ниче
12:02:14 ДП
User 90721916
это простейший демо апп на 3 компоненты :)
12:02:16 ДП
User 90721916
и он работает!
12:02:27 ДП
User 90721916
я хочу, шоп большая черепаха тоже работала
12:02:40 ДП
User 90721916
я так понимаю, если алиасов нет в демо и оно работает
12:02:44 ДП
User 212795634
Потому что нельзя писать uis/path
12:02:48 ДП
User 90721916
можно
12:02:53 ДП
User 212795634
Если не настроены алиасы
12:02:54 ДП
User 90721916
там обратные кавычки
12:03:00 ДП
User 90721916
их сожрала телега
12:03:06 ДП
User 212795634
Я не про этл
12:03:27 ДП
User 90721916
entry: {
    vendor: ["react", "react-dom"],
    app: './src/components/app/app.tsx',
    one: './src/uis/one/index.ts',
    two: './src/uis/two/index.ts',
  },
  resolve: {
    modules: ['./src', 'node_modules', './src/uis'],
    extensions: ['.ts', '.tsx', '.js', 'jsx']
  },
12:03:33 ДП
User 212795634
Вначале должна быть либо ./ Либо ../ либо алиас
12:03:40 ДП
User 90721916
это, в принципе, все, что к путям относится из конфига
12:03:54 ДП
User 212795634
Ну так у тебя модули на срц натравлены
12:04:06 ДП
User 212795634
>нет там ниче
12:04:08 ДП
12:05:04 ДП
12:05:35 ДП
User 90721916
эт, собсн, советуется для динамической загрузки
12:05:40 ДП
User 90721916
типа, чанки из этого собираются
12:06:13 ДП
User 90721916
вот тот конфиг и import(uis/${path}) работает без алиасов, лол или нет
12:06:33 ДП
User 90721916
очевидно, можно спратать  src/ui/one за one
12:06:51 ДП
User 135278254
скинь пример откуда ты это взял за основу
12:06:59 ДП
User 135278254
если в открытом доступе
12:07:24 ДП
User 90721916
из кучи говностатеек насобирал инфу :)
12:07:36 ДП
User 90721916
могу скинуть конфиги или демку если хош )
12:07:45 ДП
User 90721916
но там на самом деле нет нифига больше
12:08:50 ДП
User 90721916
простенькая react-апа в 3 компоненты, app в componentDidMount имеет это ща?
12:08:57 ДП
User 90721916
componentDidMount() {
    let name = 'one';
    let component = "text";
    const path = name + "/" + component;
    console.log("WILL IMPORT", path);
    
    //import('' + ./uis${path})
    import(uis/${path})
    .then(module  => {
      console.log("MODULE:", module );
      this.setState({ module: module['Text'] })
      console.log(this.state)
    })
    .catch(e=>{
      console.error(e);
    });
  }
12:09:16 ДП
User 90721916
не обращайте внимание на module['Text']. это от теста осталось )
12:09:47 ДП
User 90721916
я пытаюсь это ща в большую апу перетащить, вот там че-то как-то где-тол
12:09:53 ДП
12:11:52 ДП
User 135278254
имхо лучше так не делать)
12:12:10 ДП
User 135278254
но без понимания задачи сложно сказать
12:13:15 ДП
User 90721916
там хренова куча юзер интерфейсов разных с одинаковыми компонентами внутри
12:13:22 ДП
User 90721916
из них собирается аппликуха
12:13:47 ДП
User 135278254
в рантайме?
12:13:52 ДП
User 90721916
т.е. у тебя в одном углу, не знаю, кнопка из Semantic UI, в другом из Material UI
12:13:53 ДП
12:14:13 ДП
User 135278254
прикольно
12:14:30 ДП
User 90721916
жсон прилетает из бекенда и там стоит ComponentType: Button, vendor: MaterialUI
12:14:46 ДП
User 90721916
вот это все прекрасно работает, когда не надо ниче подгружать
12:15:08 ДП
User 90721916
но размер бандла, я думаю, ясен - он с локалхоста долго грузится, че про интернет говорить
12:16:00 ДП
12:16:16 ДП
User 90721916
по другому: если бы вам нужно было динамечески загрузить компонент
12:16:19 ДП
User 90721916
import(ui/${path})
12:16:25 ДП
User 90721916
и известно только начало пути
12:16:29 ДП
User 90721916
как бы вы делали?
06:06:00 ДП
User 139059931
User 90721916
как бы вы делали?
const element = import('ui/${vendor}')[ComponentType]
То есть для каждого вендора сделать файлик и загружать вендора целиком, ибо загружать отдельный компонент не практично
06:09:05 ДП
User 145851801
User 90721916
как бы вы делали?
Вебпак все за тебя делает, от реакта только для удобства нужен простой компонент для деларативной подгрузки  https://reacttraining.com/react-router/web/guides/code-splitting
reacttraining.com/react-router/web/guides/code-splitting
Learn once, Route Anywhere
06:09:34 ДП
User 145851801
Роутер не обязателен
06:11:22 ДП
User 145851801
Ну и с динамическим импортом, когда часть url меняется, у тебя все эти динамические компоненты должны в одном месте лежать, что бы паттерн проходил path/to/${component}.js
07:52:07 ДП
User 111816761
привет, постцсс херит сурсмапы
07:52:09 ДП
User 111816761
{
  test: /\.css/,
  use: [
    { loader: 'style-loader', options: { sourceMap: true } },
    { loader: 'css-loader', options: { sourceMap: true } },
    { loader: 'postcss-loader', options: { sourceMap: true } },
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
}
07:52:37 ДП
User 111816761
конфиг со страницы плагина
07:56:17 ДП
User 134905826
у меня { loader: 'postcss-loader', options: { sourceMap: 'inline' } } работает.
07:56:52 ДП
User 134905826
и да, inline только для postcss-loader.
08:02:07 ДП
User 111816761
оно часть нормально резолвит а часть херит
10:44:10 ДП
User 135278254
есть какое-то объяснение тому, что лоадеры выполняются в порядке от последнего к первому?
10:45:01 ДП
User 134905826
+1, интересно узнать, хороший вопрос (: я тоже думал над этим, wtf
10:45:11 ДП
User 135278254
{
  test: /\.css/,
  use: [
    { loader: 'style-loader', options: { sourceMap: true } },
    { loader: 'css-loader', options: { sourceMap: true } },
    { loader: 'postcss-loader', options: { sourceMap: true } },
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
}

почему было не сделать так, чтобы первым при таком порядке выполнялся style-loader? ведь это логично, и при просмотре конфига ты сначала смотришь первый потом второй
10:45:34 ДП
User 67164223
User 135278254
{
  test: /\.css/,
  use: [
    { loader: 'style-loader', options: { sourceMap: true } },
    { loader: 'css-loader', options: { sourceMap: true } },
    { loader: 'postcss-loader', options: { sourceMap: true } },
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
}

почему было не сделать так, чтобы первым при таком порядке выполнялся style-loader? ведь это логично, и при просмотре конфига ты сначала смотришь первый потом второй
ну напиши разрабам)
10:45:42 ДП
User 67164223
выполнение лоадеров идет справа налево
10:45:57 ДП
User 414846440
ф-ции вызываются от первой к последней
LoadStyles( LoadCss( LoadSass( code ) ) );
10:46:40 ДП
User 135278254
User 67164223
ну напиши разрабам)
уже слишком поздно менять, миллионы продакшенов упадут, если поменять такое поведение)
10:46:52 ДП
User 135278254
просто имхо это нелогично
10:47:01 ДП
User 67164223
User 135278254
просто имхо это нелогично
логично
10:47:44 ДП
User 135278254
тебе удобно читать текст снизу вверх?)
10:47:54 ДП
User 67164223
у меня конфиг разбит и читается нормально
10:47:56 ДП
User 67164223
так что мне норм)
10:48:17 ДП
User 67164223
у меня конфиг 60 строк
10:48:29 ДП
User 135278254
весомый аргумент
10:48:48 ДП
User 67164223
из них 20 импорты, и переменные
10:48:53 ДП
User 67164223
надо бы отрефакторить кста
10:49:11 ДП
User 67164223
в index.js добавить модули и оттуда экспортить
10:49:45 ДП
User 414846440
пишется внешний, затем внутренний
`
LoadStyles(
  LoadCss(
    LoadSass(code)
  )
);
`
очень дажё логично
10:51:57 ДП
User 135278254
так в конфиге ведь ты пишешь массивом
10:51:59 ДП
User 135278254
use: [
    { loader: 'style-loader', options: { sourceMap: true } },
    { loader: 'css-loader', options: { sourceMap: true } },
    { loader: 'postcss-loader', options: { sourceMap: true } },
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
10:52:07 ДП
User 135278254
и читаешь конфиг сверху вниз
10:52:17 ДП
User 135278254
а лоадеры выполняются снизу вверх, безумие
10:53:04 ДП
User 67164223
User 135278254
а лоадеры выполняются снизу вверх, безумие
ну это ты так написал, а так выполняются в справа налево
10:53:33 ДП
User 67164223
style <- css <- sass
07:50:36 ПП
User 412142535
ребят,знакомлюсь с вебпаком,объясните, я правильно понял,что вебпак рекомендуют разбить конфиги на три части: Основна, дев, продакшен. И с помощью webpack-merge их клеить, а в npm внести команды в script которая каждая будет работать со своим конфигом,да?
07:53:26 ПП
User 412142535
Всё,нашел ответ что да,спс
07:54:09 ПП
User 135278254
you're welcome
07:57:26 ПП
User 412142535
User 135278254
you're welcome
или чет упостил?
08:00:25 ПП
User 135278254
User 412142535
или чет упостил?
не, я к тому, что ты сам успел найти ответ, прежде чем тут ответили)
08:00:59 ПП
User 135278254
насчет твоего вопроса - обычно так делают, просто потому что удобнее смотреть различия между двумя
08:01:08 ПП
User 135278254
и что не дублировать общие части
08:01:14 ПП
User 412142535
User 135278254
не, я к тому, что ты сам успел найти ответ, прежде чем тут ответили)
а,я думал чета опустил и троллят :D вообще вебпак мозг взрывает,после галпа
08:01:16 ПП
User 412142535
понял,спс)
08:01:38 ПП
User 135278254
главное помни что вебпак не замена галпу)
08:01:43 ПП
User 135278254
а то я сначала думал что замена
08:02:06 ПП
User 135278254
теоретически можно и как замену юзать, но вообще он был не для этого придуман
08:02:42 ПП
User 412142535
насчет этого осведомлен,находил конфиг галпа,который юзал вебпак для сборки скриптов