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

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

974 members

Архив канала @webpack_ru 8 июня 2017 г.

07:24:43 ДП
User 160061898
Утро, комрадс
07:24:52 ДП
User 160061898
Тысячелетие боли

fs.js:638
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/home/~~~~/schema/loader.json'
07:24:52 ДП
User 160061898
Трабла с ExtractTextPlugin
07:24:53 ДП
User 160061898
Создаю пустой файл loader.json все заводится
07:24:53 ДП
User 160061898
Ааа, он пытается найти свой schema/loader но стучится не в тот путь
07:26:26 ДП
User 32530886
User 160061898
Тысячелетие боли

fs.js:638
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/home/~~~~/schema/loader.json'
может скинешь свой конфиг нормально?
07:27:10 ДП
User 160061898
https://gist.github.com/finethanks/67a9c21ab6d274e07c8e82604943dcf9
gist.github.com/finethanks/67a9c21ab6d274e07c8e82604943dcf9
07:27:21 ДП
User 160061898
В процессе формирования был
07:28:27 ДП
User 32530886
у тебя rules вложено в rules
07:28:28 ДП
User 32530886
https://gist.github.com/finethanks/67a9c21ab6d274e07c8e82604943dcf9#file-webpack-config-js-L24
gist.github.com/finethanks/67a9c21ab6d274e07c8e82604943dcf9
07:28:31 ДП
User 32530886
это хуйня же
07:29:12 ДП
User 32530886
не зная нафига ты юзаешь этот лоадер
https://gist.github.com/finethanks/67a9c21ab6d274e07c8e82604943dcf9#file-webpack-config-js-L32
gist.github.com/finethanks/67a9c21ab6d274e07c8e82604943dcf9
07:30:18 ДП
User 160061898
User 32530886
у тебя rules вложено в rules
Да, это опечатка, но не критичная
07:32:13 ДП
User 32530886
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/534
github.com/webpack-contrib/extract-text-webpack-plugin/issues/534
Updating to 2.1.1 results in the following error. > Error: ENOENT: no such file or directory, open '/path/to/my/project/schema/loader.json' >> at Error (native) >> at Object.fs.openSync (fs...
07:32:16 ДП
User 32530886
вот причина)
07:32:55 ДП
User 32530886
как хорошо, что у нас css-in-js
07:33:27 ДП
User 160061898
User 32530886
не зная нафига ты юзаешь этот лоадер
https://gist.github.com/finethanks/67a9c21ab6d274e07c8e82604943dcf9#file-webpack-config-js-L32
gist.github.com/finethanks/67a9c21ab6d274e07c8e82604943dcf9
Резолвить url же, ну да ладно, это тоже другая история
07:33:34 ДП
User 160061898
User 32530886
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/534
github.com/webpack-contrib/extract-text-webpack-plugin/issues/534
Updating to 2.1.1 results in the following error. > Error: ENOENT: no such file or directory, open '/path/to/my/project/schema/loader.json' >> at Error (native) >> at Object.fs.openSync (fs...
А вот это чотко
07:33:47 ДП
User 160061898
👍👍🏿
07:34:32 ДП
User 32530886
я живу на jss в одном проекте и styled-components
и не знаю ваших проблем
особенно билды css и сервер-рендеринг
вообще всё на жс и радуюсь
07:34:36 ДП
User 160061898
michael-ciniawsky commented 38 minutes ago
Released in 2.1.2
07:35:08 ДП
User 160061898
38 минут назаааааад, каарл
07:35:28 ДП
User 32530886
User 160061898
38 минут назаааааад, каарл
оперативненько)
07:35:44 ДП
User 32530886
20 минут назад выкатили тэг
07:35:50 ДП
User 32530886
2 часа назад появилась ишшью
07:36:04 ДП
User 32530886
очень очень молодцы. нагавняли конечно. но убирают за собой
07:36:24 ДП
User 160061898
на заметку, надо не в гугл, а сразу в ишью бежать в другой раз
07:36:41 ДП
User 160061898
А то с костылями то завел, но костыли ж
07:37:20 ДП
User 32530886
да, по ишшью поиск тоже есть))
07:37:28 ДП
User 32530886
главное искать по всем, даже закрытым
07:38:24 ДП
07:38:40 ДП
User 160061898
на гитхабе
07:38:47 ДП
User 160061898
слева от звезды watch
07:38:55 ДП
User 160061898
и тебе будет сыпать че там происходит
07:39:15 ДП
07:39:21 ДП
User 32530886
есть. не помню как называется
07:39:33 ДП
User 32530886
100 строк кода на node.js
07:51:46 ДП
User 32530886
можно даже на bash
07:53:30 ДП
User 32530886
но краткий сценарий:
- запросить из текстовика/базы/редиса последнюю версию пакета
- вызвать npm info package-name --json результат прогнать через JSON.parse
- сравнить версию из базы и из npm
- если версия другая. отправить почту, либо пакетом из npm либо командой в терминале
- запустить этот скрипт на сервере в кроне с повтором 2 раз в день
08:06:57 ДП
User 32530886
для чего угодно
08:20:31 ДП
User 1340580
User 32530886
но краткий сценарий:
- запросить из текстовика/базы/редиса последнюю версию пакета
- вызвать npm info package-name --json результат прогнать через JSON.parse
- сравнить версию из базы и из npm
- если версия другая. отправить почту, либо пакетом из npm либо командой в терминале
- запустить этот скрипт на сервере в кроне с повтором 2 раз в день
Если обсуждение про актуализацию зависимостей то вот же:
https://greenkeeper.io/
08:22:50 ДП
User 32530886
User 1340580
Если обсуждение про актуализацию зависимостей то вот же:
https://greenkeeper.io/
просто чувак хочет получать нотификацию о выходе версий на почту
а эта штука полезная, но меня задрала
08:23:15 ДП
User 1340580
Ммм, почта.
09:21:23 ДП
User 32530886
попробуй убрать кавычки
09:21:29 ДП
User 32530886
и добавить доллар
09:26:13 ДП
User 96391592
как заимпортить css файл из node_modules/lib_name ?
09:27:24 ДП
User 96391592
проект собирается вебпаком
09:49:08 ДП
User 160061898
Ау тебя все остальное на css?
09:49:31 ДП
User 160061898
Просто если scss, то можно импортить в файле @import "~bootrstrap/......."
09:52:56 ДП
User 97081120
а чем import 'lib_name/file.css' в твоем js-е не устраивает?
09:53:13 ДП
User 160061898
в css импорты не инлайнятся
09:53:24 ДП
09:53:39 ДП
User 97081120
если ты в js импортнешь css файл, то он добавится в бандл css
09:53:55 ДП
User 160061898
я тебе про теплое, ты про мягкое
09:54:12 ДП
User 97081120
я про то, как подключить css из нод модулей
09:54:13 ДП
User 97081120
ты про что?
09:54:14 ДП
User 160061898
Если делать импорт в js, то все ок
09:54:21 ДП
User 160061898
Он хочет сделать импорт в css
09:54:28 ДП
User 160061898
Так вот он там не заинлайнится
09:54:40 ДП
User 160061898
Нужло либо препроцессор использовать, либо цеплять в js
09:54:49 ДП
User 97081120
ну так я и говорю, импорт в js добавит в бандл, а зачем импортить прям в css я не понимаю
09:55:39 ДП
User 97081120
бля ну не замусоривай
09:55:41 ДП
User 97081120
работать не будет
09:55:46 ДП
User 97081120
но тебе ж мусор важнее
09:56:07 ДП
User 97081120
возьми препроцессор тогда
09:56:11 ДП
09:56:15 ДП
User 160061898
Либо ищи лоадер
09:56:19 ДП
User 160061898
Который будет инлайнить))
09:56:30 ДП
User 97081120
тебе less для этого с головой
09:56:34 ДП
User 97081120
и настраивать ничего не надо
09:57:02 ДП
User 97081120
в каком месте?
09:57:20 ДП
User 97081120
чет ты крайне категоричен с упоротостью
09:57:23 ДП
User 97081120
то там у тебя мусор
09:57:26 ДП
User 97081120
то там говно писать
09:57:29 ДП
User 160061898
Так не пиши)
09:57:54 ДП
User 160061898
Как часто кто-то пишет циклы в less
09:57:55 ДП
User 97081120
и переменные в лесе в каком месте нестандартные? оО
09:58:07 ДП
User 97081120
лол я даж не знал, что в лесе есть циклы =)
09:58:22 ДП
User 97081120
ТАК НЕ ТАЩИ, ЗАИМПОРТИ ИЗ JS
09:58:25 ДП
User 160061898
Да везде есть легкое подобие
09:58:25 ДП
User 97081120
камон чувак
09:58:33 ДП
User 97081120
ну твои требования внутренне противоречивы
09:58:43 ДП
User 160061898
Но как бы циклы там например можно для изогнутого градиента придумать
09:58:51 ДП
User 160061898
Или там кучу классов написать
09:58:52 ДП
User 97081120
(тем блее если лесс — истребитель, то постцсс вообще авианосец)
09:59:35 ДП
User 160061898
Шрифты он все равно не подтянет
10:00:12 ДП
User 160061898
Для них тебе нужен file-loader
10:01:06 ДП
User 97081120
так ты определись, че ты хочешь сначала
10:01:10 ДП
User 97081120
а то мы тебе предлагаем решения
10:01:15 ДП
User 97081120
они тебя все не устраивают
10:02:19 ДП
User 97081120
потому что алиасы надо долбить в resolve?
10:05:01 ДП
User 160061898
Я этот вопрос решаю через file-loader
10:05:02 ДП
User 160061898
{
        test: /\.(woff2?|ttf|eot|svg|png)$/,
        use: ['file-loader'],
      }
10:05:08 ДП
User 160061898
Конкретно со шрифтами
10:05:34 ДП
User 160061898
Алиасы позже посмотрю
11:34:54 ДП
User 125321527
User 160061898
Алиасы позже посмотрю
а как пихать их в отдельные директории?
11:35:01 ДП
User 125321527
я имею ввиду шрифты и картинки
11:35:16 ДП
User 125321527
или хотя бы в папку отдельную, вроде asset
11:35:58 ДП
User 125321527
У меня вообще все это пихается в корень при npm run build
11:36:11 ДП
User 125321527
а пути во всех файлах остаются старыми
11:36:23 ДП
User 125321527
В чем может быть проблема?
11:36:43 ДП
User 125321527
Конфиг:
https://gist.github.com/dslpp056193/a65c715e23de302b9504651cc65ceea0
gist.github.com/dslpp056193/a65c715e23de302b9504651cc65ceea0
11:37:35 ДП
User 125321527
Помогите пожалуйста.
Пришло время прикручивать фронтенд к бэкенду, а при билде какая-то каша и п##дец
11:46:58 ДП
User 97081120
CopyWebpackPlugin?
11:47:24 ДП
11:47:58 ДП
11:48:02 ДП
User 125321527
User 97081120
output?
Сейчас копаюсь в output, плагин тоже интересный
11:48:08 ДП
User 97081120
output: {
        filename: process.env.NODE_ENV === 'production' ? '[name]-[hash].js' : '[name].js',
        path: path.resolve(__dirname, outputDir),
        publicPath: publicPath,
    }
11:49:25 ДП
User 125321527
output.publicPath добавляется перед путем до js или css файла
11:49:29 ДП
User 125321527
на сколько я понял
11:49:46 ДП
User 125321527
а path просто путь, куда пихать весь билд
11:49:51 ДП
11:50:53 ДП
User 125321527
меня больше интересует пути до картинок и шрифтов
11:51:30 ДП
User 125321527
{
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'file-loader?name=[name].[ext]&publicPath=foo/&outputPath=images/'
}
У меня за это отвечает этот кусок кода
11:52:46 ДП
User 125321527
манипуляции с publicPath влияют только на путь для импорта шрифтов в css
11:53:21 ДП
User 125321527
а для чего нужен outputPath я так и не смог проследить
11:54:04 ДП
User 97081120
name=[path][name].[ext]
11:54:50 ДП
User 125321527
User 97081120
name=[path][name].[ext]
Билдится, надеюсь поможет)
11:54:59 ДП
User 125321527
Что вы имеете ввиду?
11:55:41 ДП
User 125321527
User 97081120
name=[path][name].[ext]
почему-то тянет вообще начиная от src
11:55:57 ДП
User 125321527
вместе с самой папкой src
11:56:27 ДП
User 97081120
{
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'file-loader,
      options: {
          name: '[name].[ext]',
          publicPath: 'foo/',
          outputPath: 'images/'
      }
}
11:57:29 ДП
User 97081120
User 125321527
почему-то тянет вообще начиная от src
в смысле, "тянет"?
11:58:19 ДП
User 125321527
я имею ввиду начинает создавать структуру начиная от src
т.е. в папке dist у меня создается папка src (которая вовсе там не нужна) и другие папки создаются уже внутри неё
11:58:32 ДП
User 125321527
хотя она там вовсе не нужна
11:59:48 ДП
User 125321527
сейчас покажу
11:59:58 ДП
User 97081120
конекст
12:00:45 ПП
12:01:07 ПП
User 97081120
я повтыкал в исходники файллоадера
12:01:17 ПП
User 97081120
ты можешь указать в опшнс еще context
12:01:26 ПП
User 97081120
относительно которого [path] будет брать
12:01:35 ПП
12:01:37 ПП
User 125321527
сейчас попробую
12:03:59 ПП
User 125321527
Отлично, все заработало так, как нужно)
Спасибо большое)
12:12:14 ПП
User 125321527
Хм, вебпак почему-то не тянет ничего, кроме того, что подключается через css.
Никаких других изображений не тянет, который в html прописаны
12:12:44 ПП
User 97081120
потому что он не знает о них
12:12:58 ПП
User 97081120
он идет по js из энтри, проходит все импорты и все это тянет
12:13:36 ПП
User 97081120
можешь хтмл-ку добавить свою в энти
12:13:38 ПП
User 97081120
вроде поможет
12:13:43 ПП
User 97081120
но не уверен
12:14:29 ПП
User 125321527
Извиняюсь, но что за энти?)
12:14:50 ПП
User 97081120
энтри
12:14:52 ПП
12:14:52 ПП
12:14:55 ПП
User 125321527
понял
12:20:47 ПП
User 125321527
Не помогло, получается только через CopyWebpackPlugin?
12:21:42 ПП
User 160061898
Скорее всего нужно будет повесить регулярку на html
12:22:36 ПП
User 160061898
и лоадер подтянуть для этого :D
12:22:46 ПП
User 160061898
хз, надо смотреть
12:23:02 ПП
User 125321527
лоадер на html и так стоит
12:23:04 ПП
User 125321527
raw-loader
12:23:59 ПП
User 125321527
Да и  картинки, которые будут прописаны в отдельных template-шаблонах, которые инклудятся в angular он врятли распознает
12:24:23 ПП
User 125321527
так что думаю тут выход только CopyWebpackPlugin, попробую его
12:27:42 ПП
User 97081120
аа вспомнил чит
12:27:47 ПП
User 97081120
который мы делали в ангуляре
12:27:58 ПП
User 97081120
чтобы картинки грузились, все src поменяли на ng-src
12:28:07 ПП
User 97081120
чтобы они через js проходили
12:28:25 ПП
User 97081120
понял, смотри
12:28:30 ПП
User 97081120
я думаю тебе надо сделать вот что
12:28:51 ПП
User 97081120
если у тебя картинки в хтмл по урлу, он их наверное и не находит
12:28:55 ПП
User 97081120
попробуй относительные пути
12:28:59 ПП
User 97081120
на одной картинке
12:29:16 ПП
User 97081120
и попробуй потом если не зайдет require(относительный_путь) вместо относительного пути
12:30:11 ПП
User 125321527
попробую
12:32:05 ПП
User 125321527
а с require мне кажется уже заморочки, легче просто всю папку импортить через копи-плагин)
12:32:15 ПП
User 125321527
или может какой-нибудь имг-лоадер подключить)
12:32:37 ПП
User 125321527
не, ng-src не помогло
12:42:06 ПП
User 97081120
ну это если ты не хочешь их хэшировать
12:42:22 ПП
User 97081120
или урллоадером в датаурлы превращать
12:51:52 ПП
User 45267964
/stat@combot
12:51:53 ПП
User 210944655
combot.org/chat/-1001059312510
02:31:25 ПП
User 69202877
User 45267964
/stat@combot
что значит флуд рацио?
04:11:50 ПП
User 125321527
Кто-нибудь делал такую адскую смесь, как angular+webpack+yii2?
04:12:06 ПП
User 125321527
Может кто статью хорошую видел о правильном обращении с таким зоопарком?)
05:03:54 ПП
User 125321527
Чтобы узнать как это другие организовывают, какая структура и соотвественно, как будет настроен конфиг вебпака.
05:15:30 ПП
User 125321527
Ну смотри, я собираю angular-spa. Yii2 требует создавать ассеты и всякую другую дребетню, что делается несложными манипуляциями во фронте. Но все это дело потом отправляется в одну из папок view фреймворка. Обычно я это делал галпом, перейдя на вебпак просто сменил путь у dist. Но интересно посмотреть как делают это в других командах, как происходит нормальный деплой.
05:19:11 ПП
User 626100
Первый вебпак, поставил publicPath
05:19:12 ПП
05:19:23 ПП
User 626100
Не помогает, почему?
05:19:23 ПП
05:19:42 ПП
User 97081120
потому что паблик пас про другое
05:19:47 ПП
User 32530886
User 97081120
потому что паблик пас про другое
+
05:19:47 ПП
User 626100
А как пофиксить тогда
05:19:49 ПП
User 97081120
он про то какие ссылки в манифест попадут
05:19:55 ПП
User 97081120
тебе нужен path
05:19:57 ПП
User 97081120
простой
05:20:04 ПП
05:20:09 ПП
05:20:34 ПП
User 626100
User 97081120
тебе нужен path
Щас попробую
05:22:26 ПП
User 626100
Теперь вообще нет директории build/site
05:23:43 ПП
05:24:21 ПП
User 626100
path: path.resolve(__dirname, 'build', 'static'),
05:24:27 ПП
User 626100
Так, получается?
05:24:34 ПП
User 97081120
ну типа
05:24:37 ПП
User 626100
(проще спросить у вас чем ждать вебпак)
05:24:40 ПП
User 97081120
я хз как резолв работает
05:24:49 ПП
User 97081120
мб __dirname, 'build/static'
05:27:41 ПП
User 712443
ребят, а тыкните плз ссылкой, как manifest.json подключить к html правильно, использую HtmlWebpackPlugin, чтобы в template файле можно было выбрать, что подключать  к html из manifest.json
05:28:54 ПП
User 97081120
Ну так и ок вроде
05:29:42 ПП
User 97081120
У нас было так, сейчас ejs файл которому сервер перед рендером отдает на вход манифест и всякую другу важную дичь, типа локали
05:33:41 ПП
User 626100
Короче, хочу чтобы bundle.js, vendor.js ушли в build/site/static/*, а manifest.json в build/site, как это сделать?
05:58:17 ПП
User 125321527
а index.html на .php можно как-то безболезненно поменять?)
05:58:43 ПП
User 32530886
User 125321527
а index.html на .php можно как-то безболезненно поменять?)
Лол
05:59:19 ПП
User 125321527
User 32530886
Лол
не смешно))
нужно как-то это все пихать во фреймворк, а ему нужен именно php
05:59:47 ПП
User 125321527
а каждый раз переименовывать и добавлять кусок php - деавтоматизация какая-то
06:00:03 ПП
User 32530886
User 125321527
а каждый раз переименовывать и добавлять кусок php - деавтоматизация какая-то
Не в том чате пишешь
06:00:12 ПП
06:00:22 ПП
06:00:42 ПП
User 125321527
Я хочу чтобы вебпак обрабатывал вместо index.html => index.php
06:00:45 ПП
User 125321527
это проблема для него?
06:01:01 ПП
User 32530886
Вебпак и пхп также связаны как Эверест и говно
06:01:22 ПП
User 125321527
мне не нужно чтобы он отрабатывал Php код
06:01:32 ПП
User 32530886
Насрать на горе можно, так и делают некоторые. Но это пиздец, ребята
06:01:33 ПП
User 125321527
мне нужно чтобы по факту было в названии файла index.php
06:01:50 ПП
User 32530886
User 125321527
мне нужно чтобы по факту было в названии файла index.php
Вебпак не для этого
06:01:58 ПП
User 32530886
Возьми галп и напиши что нужно
06:05:42 ПП
User 125321527
Не для этого я на вебпак переходил, чтобы обратно все под галп переписывать =\
06:05:42 ПП
User 712443
User 125321527
мне нужно чтобы по факту было в названии файла index.php
new HtmlWebpackPlugin({
            inject: false,
            filename: '../index.php',
            template: '../template.html'
        })
попробуй так
06:05:45 ПП
User 53219721
User 125321527
мне нужно чтобы по факту было в названии файла index.php
Если юзаешь HTMLPlugin, просто переименуй filename

new HtmlPlugin({
   filename: 'policy.php',
   template: 'pages/policy.pug',
   chunks: ['ios']
  })
06:06:25 ПП
User 97081120
User 626100
Короче, хочу чтобы bundle.js, vendor.js ушли в build/site/static/*, а manifest.json в build/site, как это сделать?
укажи у своего js лоадера 

options: { 
    context: path.resolve(__dirname, 'build/site/static'),
    name: '[path]-[name]-[hash].[ext]'
} 

,  

а в основном конфиге

output: {
    path: path.resolve(__dirname, 'build/site")
}
`
06:07:17 ПП
User 626100
Да ладно я просто все файлнеймы запрефиксовал через static
06:07:20 ПП
User 626100
Тоже норм
06:07:25 ПП
User 626100
Но спасибо
06:10:04 ПП
User 125321527
@poltavets, @tarran: спасибо) Именно то, что я и искал)
06:40:57 ПП
User 334671707
User 125321527
Чтобы узнать как это другие организовывают, какая структура и соотвественно, как будет настроен конфиг вебпака.
Реакт+рельсы+вебпак. Реакт и все фронтовое лежит во frontend/, в корне проекта лок фаил, package.json и нод модули
06:41:45 ПП
User 334671707
Билдится все в public/ рельсовы
06:42:37 ПП
User 334671707
Картинки, шрифты и прочее можно брать из рельсовых ассетов
06:44:08 ПП
User 334671707
User 626100
О, а как такой мап сделать?
06:45:15 ПП
User 626100
webpack-manifest-plugin
06:46:39 ПП
User 334671707
Спасибо. Плохо искала значит т.т
07:30:20 ПП
User 125321527
Можно как-то повесить вотчер, чтобы при изменении сорсов ребилдился проект в /dist?)
07:41:17 ПП
User 125321527
User 125321527
Можно как-то повесить вотчер, чтобы при изменении сорсов ребилдился проект в /dist?)
--watch добавь в npm команду
07:41:32 ПП
User 125321527
User 125321527
--watch добавь в npm команду
о, спасибо большое)
07:44:45 ПП
User 160061898
User 125321527
о, спасибо большое)
Или в конфиг вебпака
07:47:10 ПП
User 125321527
User 160061898
Или в конфиг вебпака
А как в конфиге?
07:47:22 ПП
User 125321527
В доке что-то все вокруг да около, а где прописывать не нашел(
07:48:24 ПП
User 125321527
а когда добавил --watch, то стили стали инклудиться в страницу как при server-режиме
07:48:32 ПП
User 125321527
а этого вовсе не нужно
07:48:50 ПП
User 160061898
В корне watch: true / false
07:50:43 ПП
User 125321527
User 160061898
В корне watch: true / false
Благодарю)