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

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

974 members

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

08:57:07 ДП
User 212795634
что сейчас используется вместе с webpack-dev-middleware для hot-reload?
09:05:00 ДП
09:24:25 ДП
User 146891199
It protec?
09:25:17 ДП
User 414846440
most importantly it succ
09:26:06 ДП
User 146891199
True story
09:27:21 ДП
User 414846440
вчера пытался объяснить свою проблему с JSX, но проблема-то оказывается была в другом. JSX успешно компилируется у меня в проекте. Тэги преобразуются в вызовы createElement(). Но при этом ошибка компилятора пишется в лог
 Module parse failed: Unexpected token (177:33) 
То есть, оно работает, но лезет ошибка((
09:27:29 ДП
User 414846440
осталось понять как избавиться от ошибки
09:32:56 ДП
User 414846440
WebPack 3.11
09:34:25 ДП
User 201036437
User 414846440
вчера пытался объяснить свою проблему с JSX, но проблема-то оказывается была в другом. JSX успешно компилируется у меня в проекте. Тэги преобразуются в вызовы createElement(). Но при этом ошибка компилятора пишется в лог
 Module parse failed: Unexpected token (177:33) 
То есть, оно работает, но лезет ошибка((
А что там, на 177:33?
09:35:03 ДП
User 212795634
User 414846440
вчера пытался объяснить свою проблему с JSX, но проблема-то оказывается была в другом. JSX успешно компилируется у меня в проекте. Тэги преобразуются в вызовы createElement(). Но при этом ошибка компилятора пишется в лог
 Module parse failed: Unexpected token (177:33) 
То есть, оно работает, но лезет ошибка((
покажи конфиг
09:35:23 ДП
User 414846440
User 201036437
А что там, на 177:33?
            var roleButtonsNew = <div>
09:36:03 ДП
User 147771380
User 414846440
            var roleButtonsNew = <div>
А закрыть?
09:41:53 ДП
User 414846440
там ниже закрыто. Там вот какой прекол: если я выключаю JSX в .babelrc, то я получаю два раза ошибку: один раз вначале
Module parse failed: Unexpected token (177:33)
второй раз в конце
Module build failed: SyntaxError:  Unexpected token (177:33)

А если я включаю JSX в .babelrc, то получаю только один раз ошибку, вначале
09:42:23 ДП
User 414846440
такое ощущение что та которая вначале - какая-то лишняя
09:42:25 ДП
User 112715267
User 414846440
            var roleButtonsNew = <div>
Var в 2138м 😴
09:43:57 ДП
User 414846440
User 414846440
такое ощущение что та которая вначале - какая-то лишняя
но непонятно почему она лезет
10:00:46 ДП
User 191161613
webpack 3.10.0
import { MdSomeIcon } from 'react-icons/.../md'
тянет за собой всю либу
что я делаю не так?
10:01:00 ДП
User 212795634
юзаешь 3 вебпак
10:01:39 ДП
User 191161613
ну так тришейкинг вроде ж и в 3й работать должен
10:01:39 ДП
10:01:44 ДП
10:01:50 ДП
User 212795634
найди файл где лежит только этот компонент и импортируй
10:01:57 ДП
User 212795634
только такой вариант
10:02:16 ДП
User 191161613
та проще вп обновить, хз
10:02:17 ДП
User 201036437
User 191161613
ну так тришейкинг вроде ж и в 3й работать должен
Тришейкингом вообще аглифай занимается, насколько я помню.
10:02:28 ДП
User 201036437
ВП вроде как не занимается сам по себе им
10:03:27 ДП
User 212795634
User 191161613
та проще вп обновить, хз
я щас пробовал, реакт хот лоадер с дев мидлварой не получилось соединить
10:03:53 ДП
User 191161613
а я не юзаю РХЛ 
так что, пока что приемлимо :D
10:21:40 ДП
User 414846440
ладно ребят вот конфиг файл с JSX-проблемой https://pastebin.com/CLqytkUT посмотрите плез если не боитесь
10:30:52 ДП
User 67164223
User 414846440
ладно ребят вот конфиг файл с JSX-проблемой https://pastebin.com/CLqytkUT посмотрите плез если не боитесь
ну и где бабель лоадер для jsx?&
10:31:22 ДП
User 414846440
User 67164223
ну и где бабель лоадер для jsx?&
у меня нет в проекте jsx файлов, все файлы имеют расширение .js
10:31:43 ДП
User 67164223
я хз чо у тебя за проблема с jsx
10:38:54 ДП
User 414846440
а можно ли как-то получить более подробную информацию по Error ? Стэк, лоадер?
10:39:09 ДП
User 414846440
типа в каком loader-е произошёл Error
10:47:33 ДП
User 39232169
User 191161613
ну так тришейкинг вроде ж и в 3й работать должен
с babel 7 заработал
10:47:57 ДП
User 191161613
User 39232169
с babel 7 заработал
окс, мерси, буду ковырять
10:48:04 ДП
User 212795634
User 39232169
с babel 7 заработал
интересно при чем тут бабел
10:48:44 ДП
User 39232169
там какая-то тема с помечанием спец комментарием /* PURE */. я если честно сам не догнал до конца
10:49:55 ДП
User 39232169
видимо чтоб понять, что код "чистый" - ничего не вызывает например в таймауте и его можно благополучно удалить
10:50:08 ДП
User 212795634
и как ты пометишь модули из нпм?)
10:50:44 ДП
User 39232169
я свои помечу
10:52:10 ДП
User 39232169
кароче - ставишь babel 7 - свои (!) лишние модули перестают попадать в бандл, например при реэкспорте
10:52:40 ДП
User 39232169
про всю экосистему не могу сказать, т.к. не очень понимаю как это в кишках работает
10:55:02 ДП
User 39232169
а, не прочёл исходный вопрос. Возможно, если пакет выкладывается не транспайленный - то будет работать как я написал
10:56:36 ДП
User 39232169
ну или попробовать какой-нибудь closure-compiler вместо uglify - возможно он более умный/агрессивный
01:56:16 ПП
User 414846440
ребяттт не могу понять из какого лоадера лезет ошибка ребяттттт
01:58:19 ПП
User 311048520
User 414846440
ребяттт не могу понять из какого лоадера лезет ошибка ребяттттт
--display-error-details не помогает?
01:59:31 ПП
User 311048520
или у тебя сборка норм проходит?
02:00:13 ПП
User 414846440
сейчас попробую
02:00:24 ПП
User 67164223
User 414846440
ребяттт не могу понять из какого лоадера лезет ошибка ребяттттт
дай форк проекта
02:11:09 ПП
User 414846440
User 67164223
дай форк проекта
как?
02:11:25 ПП
User 414846440
User 311048520
--display-error-details не помогает?
включил error details, теперь выводится куча текста
02:12:08 ПП
User 311048520
User 414846440
включил error details, теперь выводится куча текста
что-нибудь интересное нашел?
02:17:05 ПП
User 414846440
в конфиге есть три entry:  
logon.js, app.js, error.js
Ошибка выводится сразу после сообщений о том что эти entry скомпилированы или что-то в этом роде
https://pastebin.com/raw/XygJuwBb
02:17:55 ПП
User 414846440
и ниже
@ ./webpack/app.js
02:32:59 ПП
User 414846440
в общем файл app.js зачем-то компилится два раза
02:33:18 ПП
User 414846440
с тем конфигом который у меня есть. Я это даже по выходным файлам вижу
02:33:48 ПП
User 414846440
и один раз он компилится без JSX, а второй раз с JSX. Отсюда и проблема. Осталось понять что тут  происходит
02:43:11 ПП
User 414846440
какая-то дич
02:49:02 ПП
User 67164223
как архитектуру начал
02:49:07 ПП
User 67164223
теперь пожинай
03:16:36 ПП
User 414846440
пытаюсь сделать более лючший конфиг, но пока не получается
03:25:19 ПП
User 414846440
в лог столько сообщений выводится, что не сразу поймёшь, была ошибка при билде или нет
03:25:26 ПП
User 414846440
приходится листать
03:35:42 ПП
User 311048520
User 414846440
в конфиге есть три entry:  
logon.js, app.js, error.js
Ошибка выводится сразу после сообщений о том что эти entry скомпилированы или что-то в этом роде
https://pastebin.com/raw/XygJuwBb
А скинь исходники, где у тебя присваивается
var roleButtonsNew = ...
03:45:28 ПП
User 414846440
пытаюсь сделать чтобы .js файлы игнорировались в том модуле в котором css строится, но чёт нифига не получается
03:45:48 ПП
User 414846440
там есть один корневой файл который импортирует кучу .css и .js
03:46:14 ПП
User 414846440
надо сделать чтобы только этот файл билдился и его .css-ы, а все его .js-импорты чтобы игнорировались, но я чёт не врубаюсь
03:46:24 ПП
User 414846440
сложна
03:48:16 ПП
User 414846440
сам фильтр написать несложно, другое дело что он почему-то не работает, и .js всё равно билдятся. Сделал так
{
  test: function(x) {
    var r = x.indexOf("MyApp/webpack") === -1 &&
      x.indexOf("MyApp\\webpack") === -1 &&
      x.endsWith(".js");
    console.log(r, x);
  },
  loader: 'ignore-loader',
},
03:48:37 ПП
User 414846440
ето правило после css-ов идёт
03:51:55 ПП
User 414846440
забыл return азпххпафхыпх убейте плз
03:57:09 ПП
User 414846440
кароч фильтр "работает", но теперь я получаю ошибку 
__webpack_require__(...) is not a function
во всех css файлах
03:57:15 ПП
User 414846440
👌👌👌👍👍👍
03:57:53 ПП
User 414846440
кто-нибудь знает в чём может быть проблема?
04:04:17 ПП
User 308402933
User 275470931
Ребят, я решил сегодня с утра изучить вебпак. Сейчас я где-то на стадии: "Так, я всё понял. Установлю ка стороннюю сборку. ЧТО ЭТО ВООБЩЕ?"
А вы сколько изучали вебпак, чтобы понимать чужие сборки за минимальное кол-во времени?
поработал с 5 разными конфигами, сделал 2 своих
на 3-й раз после 8 потраченых часов с горем пополам и помщью этого чатика собрал что нужно
04:04:26 ПП
User 308402933
а, еще и курс на юдеми обзорный посмотрел
04:04:40 ПП
User 55943427
User 308402933
поработал с 5 разными конфигами, сделал 2 своих
на 3-й раз после 8 потраченых часов с горем пополам и помщью этого чатика собрал что нужно
success story
04:05:16 ПП
User 308402933
все-равно я сделал херню: нужно чтобы в index.html не подключался сам css, а я хз как. 
или не собирается css или сами инклюдится
а мне это не надо
04:05:28 ПП
04:05:36 ПП
User 308402933
тут за стикеры не банят, кстати?
04:06:25 ПП
User 308402933
а то я без вас с вебпаком походу не справлюсь
ДЖОНИ, ДЖОНИ, КОНФИГИ В РЕПОЗИТОРИИ!
ЧЕРТОВЫ ГУКИ
04:36:32 ПП
User 414846440
User 308402933
все-равно я сделал херню: нужно чтобы в index.html не подключался сам css, а я хз как. 
или не собирается css или сами инклюдится
а мне это не надо
это через extract-text-plugin делается
05:10:32 ПП
User 308402933
User 414846440
это через extract-text-plugin делается
https://gist.github.com/1littleOrc/e4034dd8748343d3dcbd06b73b72e6f4
так и делаю
но чет все пропало (
05:10:38 ПП
User 308402933
можешь глянуть пожалуйста?
05:10:47 ПП
User 308402933
почему css дважды инклюдится
05:11:09 ПП
User 308402933
я его еще раз подключаю в entry point через import правда
но без той настройки ксс не собирается
05:11:18 ПП
User 308402933
как и без ExtractTextPlugin
05:22:33 ПП
User 414846440
это из-за html плагина по-моему. Я делал так: extract-text-plugin использовал, а html-loader-ы нафиг
05:43:44 ПП
User 259652278
Товарищи, можете подсказать, как бороться с тем, что при закидывании CSS в dist/css, а сопутствующих картинок в dist/img, в CSS-файлах указывается не ../img/layers.png, а img/layers.png?
05:51:14 ПП
User 317344655
Использую webpack-dev-server и react-router. Все отлично но когда я захожу в глубину нескольких вложенных роутов (к примеру /test-page/example-page) и обновляю страницу я получаю ошибки сообщаюшие о том что не удалось получить файлы такие как: .png, .svg и тд. 

Проблема из-за того что браузер пытается их получить по пути:
 localhost:3000/test-page/example-page 
а не по пути:
 localhost:300/

Понятно что проблема в том что стоят относительные пути для ресурсов когда нужны абсолютные. Как это можно решить. Полагаю  тут 2 варианта или настроить конфиг вебпака таким образом что бы он проставлял абсолютные пути для всех ресурсов. Или научить dev-server отдавать файлы через относительные пути или же проксировать запросы на файлы с относительного пути на абсолютные.
06:38:44 ПП
User 259652278
Товарищи, подскажите пожалуйста, что делать в такой ситуации? При подтягивании картинок из css, подтянутых из node_modules они оказываются в dist/img, но в CSS путь остается img/..., а не ../img/...  (в src/main.scss: @import '~leaflet-draw/dist/leaflet.draw.css'; в импортированном CSS: bg-img: url('path/to/img.ext'))

Config: https://gist.github.com/kinjalik/67fdab72aebd51ce5082b840a57c4915
gist.github.com/kinjalik/67fdab72aebd51ce5082b840a57c4915
GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.
06:44:09 ПП
User 308402933
User 414846440
это из-за html плагина по-моему. Я делал так: extract-text-plugin использовал, а html-loader-ы нафиг
спасибо!
06:59:16 ПП
User 67164223
User 317344655
Использую webpack-dev-server и react-router. Все отлично но когда я захожу в глубину нескольких вложенных роутов (к примеру /test-page/example-page) и обновляю страницу я получаю ошибки сообщаюшие о том что не удалось получить файлы такие как: .png, .svg и тд. 

Проблема из-за того что браузер пытается их получить по пути:
 localhost:3000/test-page/example-page 
а не по пути:
 localhost:300/

Понятно что проблема в том что стоят относительные пути для ресурсов когда нужны абсолютные. Как это можно решить. Полагаю  тут 2 варианта или настроить конфиг вебпака таким образом что бы он проставлял абсолютные пути для всех ресурсов. Или научить dev-server отдавать файлы через относительные пути или же проксировать запросы на файлы с относительного пути на абсолютные.
api fallback включи для дев сервера
06:59:33 ПП
User 67164223
User 317344655
Использую webpack-dev-server и react-router. Все отлично но когда я захожу в глубину нескольких вложенных роутов (к примеру /test-page/example-page) и обновляю страницу я получаю ошибки сообщаюшие о том что не удалось получить файлы такие как: .png, .svg и тд. 

Проблема из-за того что браузер пытается их получить по пути:
 localhost:3000/test-page/example-page 
а не по пути:
 localhost:300/

Понятно что проблема в том что стоят относительные пути для ресурсов когда нужны абсолютные. Как это можно решить. Полагаю  тут 2 варианта или настроить конфиг вебпака таким образом что бы он проставлял абсолютные пути для всех ресурсов. Или научить dev-server отдавать файлы через относительные пути или же проксировать запросы на файлы с относительного пути на абсолютные.
и путь до контента
06:59:55 ПП
User 67164223
User 259652278
Товарищи, можете подсказать, как бороться с тем, что при закидывании CSS в dist/css, а сопутствующих картинок в dist/img, в CSS-файлах указывается не ../img/layers.png, а img/layers.png?
fileloader должен помочь
07:01:53 ПП
User 259652278
Его к картинкам или к стилям?
08:09:50 ПП
User 67164223
есть у кого более развернутый пример optimization.splitchuncks?
08:33:43 ПП
User 67164223
module.exports = () => ({
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true,
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
});
08:33:57 ПП
User 67164223
скажите что-нибудь об этой хуйне
Сука, как сложно без доки
08:39:02 ПП
User 412142535
User 67164223
module.exports = () => ({
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true,
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
});
Что за сложная херня ? Это 4 вебпак ?
08:39:20 ПП
User 67164223
User 412142535
Что за сложная херня ? Это 4 вебпак ?
я пытаюсь типо углифая настроить
08:39:46 ПП
User 412142535
User 67164223
я пытаюсь типо углифая настроить
Охереть настройка
08:39:59 ПП
User 412142535
Да это ж целый конфиг
08:40:18 ПП
User 67164223
Хотя я могу пиздеть
08:40:24 ПП
User 67164223
вроде в продакшен моде
08:40:30 ПП
User 67164223
в вебпаке 4 под копотом углифай
08:40:38 ПП
User 67164223
а сейчас я на чанки разбить пытаюсь
08:42:51 ПП
User 67164223
const webpack = require('webpack');

module.exports = () => ({
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      parallel: 4,
      sourceMap: true,
      compress: {
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
      },
      output: {
        comments: false,
      },
    }),
  ],
});
08:42:56 ПП
User 67164223
вот у меня для 3 версии
08:43:58 ПП
User 67164223
кароч в пизду, я сейчас залью в свою репу, что я сегодня порефакторил, ебал я в рот
09:08:59 ПП
User 47236452
бля, ребят
09:09:06 ПП
User 47236452
кароче, гружу ol
09:09:23 ПП
User 47236452
var ol = require('ol');

console.log(ol); // {}
09:09:39 ПП
User 47236452
после загрузки сайта:

ol в консоли и норм все выводит
09:09:56 ПП
User 47236452
если не сделать require('ol'); то и в консоли ничего не будет (вообще)
09:16:49 ПП
User 47236452
ну кроме ошибки конечно)
09:18:13 ПП
User 122087672
User 47236452
если не сделать require('ol'); то и в консоли ничего не будет (вообще)
а что ты ожидаешь увидеть?
09:19:27 ПП
User 47236452
openlayers - те модуль
09:25:56 ПП
User 122087672
дык ты ж require не сделал
09:26:26 ПП
User 122087672
аа все я догнал, не так прочел вначале
11:48:12 ПП
User 435494599
Webpack 4, как вы грузите локальные шрифты, у меня file loader нифига не работает, url loader тоже. Вебпак ругается, типа нужен лоадер для woff и.т.
11:48:43 ПП
User 435494599
Поделитесь конфигом, пожплуйста