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

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

974 members

Архив канала @webpack_ru 15 сентября 2017 г.

05:17:53 ДП
User 63958239
presets: [
  ["env", { module: false }],
  "react"
]
05:18:54 ДП
User 63958239
Еяпп, то типа вот. Мы прокинули конфиг в енв, что отключает преобразование модулей, что включает вебпаковский тришейкер
05:21:50 ДП
User 63958239
Удивлен, что столько людей все еще юзают пресет2015 и стэйджи, когда 2017 и есть енв
07:02:17 ДП
User 403242543
Всем привет, скажите есть ли ощутимая разница в скорости билда между версией 1 и последней версией вебпака?
07:05:26 ДП
User 212795634
User 403242543
Всем привет, скажите есть ли ощутимая разница в скорости билда между версией 1 и последней версией вебпака?
Знаю что между 2 и 3 есть разница, второй падает на убунте с 512 мб рамы, третий норм работает
09:24:31 ДП
User 189706357
User 403242543
Всем привет, скажите есть ли ощутимая разница в скорости билда между версией 1 и последней версией вебпака?
между 1й думаю ощутимая, между 2 и 3й не очень
09:33:01 ДП
User 50263515
Всем привет, у меня возникает ошибка при запуске npm run build:

ERROR in ./app/jsc/index.js

(Emitted value instead of an instance of Error) D:\project\app\jsc\index.js:6:1: Unknown word  4 |  */

  5 |

> 6 | import 'babel-polyfill';


Я не знаю что с ней делать, потратил вчера полдня на гугление, но по-моему только сделал хуже, потому что вчера у меня была другая ошибка (которая теперь ниже первой):

ERROR in ./node_modules/babel-polyfill/lib/index.js

(Emitted value instead of an instance of Error) D:\project\node_modules\babel-polyfill\lib\index.js:1:1: Unknown word> 1 | "use strict";


До этого на проекте был webpack 1 и всё работало, а я делаю миграцию на 3 (в отдельной папке конечно же).

Прикладываю конфиг и package.json https://gist.github.com/unfalse/f165a012c12d08637f0526299bb88979
gist.github.com/unfalse/f165a012c12d08637f0526299bb88979
09:34:53 ДП
User 87125128
— Приветствую всех. Решил пересесть с Gulp на Webpack (используется версия 3,10,10), но тут же столкнулся с проблемой сборки из исходной структуры в конечную. Есть кто уже разгрыз данный гранит?  мог привести примерную структуру проекта и ожидаемый результат
— http://take.ms/4Gg9u - структура
__ https://gist.github.com/anonymous/8b9e654ce034d23966fe6c5c36540a43 - конфиг
monosnap.com/file/vsu6EQo4im3D7oHi12ujWkub0CeRlm
Click to see the full size picture
10:12:11 ДП
User 50263515
Мне наверное проще будет с нуля hello world собрать на третьем вебпаке
10:28:57 ДП
User 87125128
User 50263515
Всем привет, у меня возникает ошибка при запуске npm run build:

ERROR in ./app/jsc/index.js

(Emitted value instead of an instance of Error) D:\project\app\jsc\index.js:6:1: Unknown word  4 |  */

  5 |

> 6 | import 'babel-polyfill';


Я не знаю что с ней делать, потратил вчера полдня на гугление, но по-моему только сделал хуже, потому что вчера у меня была другая ошибка (которая теперь ниже первой):

ERROR in ./node_modules/babel-polyfill/lib/index.js

(Emitted value instead of an instance of Error) D:\project\node_modules\babel-polyfill\lib\index.js:1:1: Unknown word> 1 | "use strict";


До этого на проекте был webpack 1 и всё работало, а я делаю миграцию на 3 (в отдельной папке конечно же).

Прикладываю конфиг и package.json https://gist.github.com/unfalse/f165a012c12d08637f0526299bb88979
gist.github.com/unfalse/f165a012c12d08637f0526299bb88979
попробуй убрать use strict, во второй ошибке ругается именно на эту строку, как вариант
10:39:28 ДП
User 50263515
User 87125128
попробуй убрать use strict, во второй ошибке ругается именно на эту строку, как вариант
Из конфига убирал уже, не помогло
10:40:05 ДП
User 50263515
User 87125128
попробуй убрать use strict, во второй ошибке ругается именно на эту строку, как вариант
Ругается он на строку в babel, предлагаешь из него убирать?
10:42:15 ДП
User 87125128
User 50263515
Ругается он на строку в babel, предлагаешь из него убирать?
нет это не вариант, видимо версионность как то отладить нужно. А тут засада
12:05:33 ПП
User 276230913
https://webpack.js.org/guides/lazy-loading/
button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module =>
ребята, можно таким образом импортить нужную svg в связке с svg-loader?
12:06:48 ПП
User 276230913
у меня 200 иконок и хочу в спрайт запихнуть только те, имена которых приходят от сервера
12:07:35 ПП
User 276230913
return require.ensure([], require => require(`../../img/svg/weather/${this.iconId}.svg`), 'sprite');
сейчас работает так, но он загружает всю папку. хотельсь бы только нужные файлы
01:17:34 ПП
User 72036040
Подскажите, пожалуйста
1) DefinePlugin вебпака, то что в него суешь должно быть доступно в window? Или как это сделать?
2) Если в plugins  засунуть два DefinePlugin, оба отработают?
01:17:57 ПП
User 32530886
то что кидаешь в Define это обычный объект
01:18:01 ПП
User 32530886
можно кидать сколько хочешь
01:18:58 ПП
User 72036040
Не, наоборот. Я хочу получить из window то, что засунул в DefinePlugin. Это же так делать или по другому как-то?
01:19:29 ПП
User 72036040
Пока не получается чет, хотя настройки кажутся прозрачными. Или где мне искать то что я положил в DefinePlugin?
01:20:59 ПП
User 72036040
В общем смысл в том, что в клиентском коде я хочу сделать проверку типа build !== 'production', вот откуда мне взять переменную build? Я думал DefinePlugin ее в window засунет, но, видимо, нет...
01:22:07 ПП
User 32530886
User 72036040
Не, наоборот. Я хочу получить из window то, что засунул в DefinePlugin. Это же так делать или по другому как-то?
DefinePlugin делает замены по коду
01:22:10 ПП
User 32530886
я не пойму че ты хочешь
01:22:37 ПП
User 112414052
User 72036040
В общем смысл в том, что в клиентском коде я хочу сделать проверку типа build !== 'production', вот откуда мне взять переменную build? Я думал DefinePlugin ее в window засунет, но, видимо, нет...
для такого лучше юзать EnrivomentPlugin\
01:22:42 ПП
User 32530886
User 72036040
В общем смысл в том, что в клиентском коде я хочу сделать проверку типа build !== 'production', вот откуда мне взять переменную build? Я думал DefinePlugin ее в window засунет, но, видимо, нет...
DefinePlugin пройдет по каждому твоему файлу, найдет где ты юзаешь переменную build и заменит ее на ЗНАЧЕНИЕ
01:23:11 ПП
User 72036040
User 32530886
DefinePlugin пройдет по каждому твоему файлу, найдет где ты юзаешь переменную build и заменит ее на ЗНАЧЕНИЕ
Аааа. Ясно
01:23:26 ПП
User 32530886
new DefinePlugin({ __BUILD__: 'production' })

в коде у тебя найдет
if (__BUILD__ === 'production') {
и сделает замену
if ('production' === 'production') {
01:23:50 ПП
User 32530886
но вроде может превратить сразу в true или false
01:23:54 ПП
User 72036040
ну а потом на true, а потом уберет if. Ясно
01:23:56 ПП
User 32530886
а аглифаер вырежет там где false
01:24:50 ПП
User 112414052
new webpack.EnvironmentPlugin({
  NODE_ENV: 'development' // дефолтное значение
});


if (process.env.NODE_ENV === 'production')
01:24:56 ПП
User 72036040
Смешно конечно
01:26:52 ПП
User 32530886
User 112414052
new webpack.EnvironmentPlugin({
  NODE_ENV: 'development' // дефолтное значение
});


if (process.env.NODE_ENV === 'production')
потому что надо делать '"development"'
или JSON.stringify('development')
01:27:08 ПП
User 112414052
чо зачем
01:27:20 ПП
User 32530886
он вставляет именно как написал строку
01:27:23 ПП
User 72036040
User 32530886
потому что надо делать '"development"'
или JSON.stringify('development')
Да, я из примера доки прям вставил
01:27:57 ПП
User 112414052
User 32530886
он вставляет именно как написал строку
он стрингифает как раз
01:28:03 ПП
User 112414052
https://webpack.js.org/plugins/environment-plugin/
01:28:10 ПП
User 32530886
User 112414052
он стрингифает как раз
мы про DefinePlugin
01:28:22 ПП
User 112414052
а, ну а я про EnviromentPlugin
01:28:40 ПП
User 32530886
User 112414052
а, ну а я про EnviromentPlugin
он не покрывает кейсов для кастомных значений, только env
01:28:49 ПП
User 72036040
Чет не хочет компилить. Возможно это связано с линтером в CRA, пойду в issue погуглю
01:29:11 ПП
User 112414052
так если нужно прод-непрод ифать, то все покрывает
01:29:17 ПП
User 112414052
а как я понял, задача в этом
01:34:41 ПП
User 72036040
В общем в CRA доступно process.env.NODE_ENV из коробки
01:35:59 ПП
User 272129522
Можно ли как-то минимизировать/убрать эту часть? Просто у меня есть файлы по 50 строчек, и больше половины из них обертка от webpack.
01:36:06 ПП
01:37:00 ПП
User 32530886
User 272129522
Можно ли как-то минимизировать/убрать эту часть? Просто у меня есть файлы по 50 строчек, и больше половины из них обертка от webpack.
ты эти файлы отдельно вебпаком бандлишь?
01:37:10 ПП
User 32530886
вообще-т они должны входить в общий бандл
01:37:17 ПП
User 32530886
а такая обертка одна на весь бандл
02:02:29 ПП
User 272129522
User 32530886
ты эти файлы отдельно вебпаком бандлишь?
забандлить всё в один файл я не могу из-за структуры: админу не нужны паблик файлы, и наоборот. хотя, в дальнейшем планирую разбивать и бандлить, когда структура сложнее станет
02:03:07 ПП
User 272129522
я наверное щас какую-то глупость делаю, но не знаю как по другому. первый день сегодня с вебпаком и нодой работаю, толком ничего не понимаю.

весь js для своего бэкенда я обрабатываю через babel через webpack(в дальнейшем планирую подключить тайпскрипт и минификацию). 

собственно, вопрос: как можно избежать обертки babel-polyfill в вебпаковский контейнер, стоит ли вообще избегать(всё таки пару лишних кб); или я вообще неправильно подключаю babel polyfill?
02:03:37 ПП
02:03:44 ПП
User 32530886
User 272129522
забандлить всё в один файл я не могу из-за структуры: админу не нужны паблик файлы, и наоборот. хотя, в дальнейшем планирую разбивать и бандлить, когда структура сложнее станет
Есть динамические чанки
02:06:17 ПП
User 272129522
как babel polyfill в моём случае наиболее правильно будет загрузить? я чувствую, что какую-то херню делаю, но не уверен
02:07:34 ПП
User 272129522
можно было бы забандлить, но он используется везде. а к каждому файлу бандлить - не то. поэтому я отдельно сделал
02:36:07 ПП
User 50263515
npm пишет мне UNMET PEER DEPENDENCY webpack@3.6.0, что это значит? Вебпак у меня установлен
02:36:34 ПП
User 50263515
Сейчас мысль пришла - может у меня вебпак старый глобально установлен?
02:41:19 ПП
User 272129522
может
02:41:23 ПП
User 272129522
3.6 - последний
02:41:31 ПП
User 272129522
только что обновился
02:44:35 ПП
User 50263515
Самый отлаженный и стабильный сейчас 2 ?
02:45:36 ПП
User 50263515
Я уже 2 дня с этой проблемой вожусь (проект не билдится)
02:51:34 ПП
User 32530886
User 50263515
Самый отлаженный и стабильный сейчас 2 ?
да и 3 тоже гуд
03:03:56 ПП
User 272129522
я что-то не понимаю
03:04:17 ПП
User 272129522
почему не используется точка с запятой? в ноде можно её не использовать?
03:04:23 ПП
User 272129522
взять хотя бы этот пример: https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
03:05:29 ПП
User 32530886
User 272129522
почему не используется точка с запятой? в ноде можно её не использовать?
да
03:05:40 ПП
User 272129522
а нужно?
03:05:49 ПП
User 32530886
User 272129522
почему не используется точка с запятой? в ноде можно её не использовать?
вообще в js она не обязательно
и мои конфиги линтера вообще запрещают ее использовать
03:05:57 ПП
User 32530886
User 272129522
а нужно?
только в паре случаев
03:06:31 ПП
User 147771380
User 272129522
почему не используется точка с запятой? в ноде можно её не использовать?
ASI JS
03:06:59 ПП
User 147771380
User 147771380
ASI JS
Есть такой механизм в языке, который их сам ставит. Вот это он
03:07:15 ПП
User 272129522
я нагуглил уже) ну, прикольно - не знал
03:08:01 ПП
User 147771380
Just for you to know
03:16:48 ПП
User 72036040
Ну на самом деле там с return сейчас самые "большие" проблемы. Просто нужно запомнить, что не нужно выражение для return переносит на следующую строку
04:45:12 ПП
User 272129522
Блин, подскажите
04:45:44 ПП
User 272129522
Как можно сделать, чтобы какая-нибудь переменная была публично доступна? Вебпак ведь её оборачивает, и она недоступна
04:46:09 ПП
User 272129522
API было в виде экземпляра класса
04:47:35 ПП
User 147771380
User 272129522
Как можно сделать, чтобы какая-нибудь переменная была публично доступна? Вебпак ведь её оборачивает, и она недоступна
import
05:05:55 ПП
User 72036040
User 272129522
Как можно сделать, чтобы какая-нибудь переменная была публично доступна? Вебпак ведь её оборачивает, и она недоступна
window.myVar = myVar
05:07:00 ПП
User 147771380
User 72036040
window.myVar = myVar
Но зачем?
05:07:09 ПП
User 72036040
Я откуда знаю, зачем ему
05:07:20 ПП
User 72036040
Ну так делать не хорошо, да
05:07:22 ПП
User 147771380
Ну человек не понял, как импорты работают
05:07:35 ПП
User 147771380
Чего ему дрянь всякую советовать
05:08:25 ПП
User 1333299
User 147771380
Чего ему дрянь всякую советовать
+
05:12:43 ПП
User 184770999
ребят кто-то pug-html-loader юзает? Как вы инлайново background-image добавляете что бы вебпак потом картинку в прод подтянул?
05:14:10 ПП
User 147771380
User 184770999
ребят кто-то pug-html-loader юзает? Как вы инлайново background-image добавляете что бы вебпак потом картинку в прод подтянул?
Ну кто-то ж, наверное, юзает, раз он есть))
05:16:43 ПП
User 121304700
User 184770999
ребят кто-то pug-html-loader юзает? Как вы инлайново background-image добавляете что бы вебпак потом картинку в прод подтянул?
https://github.com/willyelm/pug-html-loader/issues/9 ?
github.com/willyelm/pug-html-loader/issues/9
does pug-html-loader support relative path in img src attr? such as src |-- test |--|-- test.png |--|--test.jade webpack.conf.js img in test.jade,when I write img(src="test.png") it not works I ha...
05:18:08 ПП
User 184770999
User 121304700
https://github.com/willyelm/pug-html-loader/issues/9 ?
github.com/willyelm/pug-html-loader/issues/9
does pug-html-loader support relative path in img src attr? such as src |-- test |--|-- test.png |--|--test.jade webpack.conf.js img in test.jade,when I write img(src="test.png") it not works I ha...
там проблема была в подключении картинки через img, у меня же вопрос именно в bacgground-image инлайново, тут так не работает.
05:18:34 ПП
User 147771380
А почему не заюзать отдельно pug loader и html loader?
05:26:41 ПП
User 32530886
User 147771380
А почему не заюзать отдельно pug loader и html loader?
+
05:30:41 ПП
User 272129522
User 147771380
import
и каком в таком случае пользователю заюзать API? т.е. ему надо будет указывать полный адрес, типа import 'http://mysiteutl/assets/js/mycustom.js', чтобы получить экземпляр класса, или как? а так, с URL, нельзя делать, насколько я знаю
05:31:29 ПП
User 147771380
User 272129522
и каком в таком случае пользователю заюзать API? т.е. ему надо будет указывать полный адрес, типа import 'http://mysiteutl/assets/js/mycustom.js', чтобы получить экземпляр класса, или как? а так, с URL, нельзя делать, насколько я знаю
Поясни, что ты хочешь получить в результате. Что ты пишешь?
05:31:52 ПП
User 272129522
или отдельный файл, вне вебпака, который импортит переменную, и потом записывает её в глобальное пространство?
05:32:11 ПП
User 272129522
ну, просто надо чтоб экземпляр класса был публично доступен, и можно было его методы вызывать пользователю
05:32:39 ПП
User 147771380
User 272129522
ну, просто надо чтоб экземпляр класса был публично доступен, и можно было его методы вызывать пользователю
Ты можешь как-то менее абстрактно объяснить?
05:33:41 ПП
User 147771380
Откуда берется эта нужда?
05:35:15 ПП
User 272129522
просто, до вебпака, у меня создавался экземпляр класса в глобальной области видимости, и любой пользователь мог его заюзать, например, из консоли - сейчас так нельзя сделать, т.к. вебпак всё обернул. 

надо как-то вернуть пользователю возможность взаимодействовать с экземпляром этого класса. т.е., грубо говоря, вернуть его в глобальную область видимости
05:35:44 ПП
User 272129522
User 147771380
Откуда берется эта нужда?
из ТЗ, которое я не могу оспаривать
05:36:36 ПП
User 147771380
User 72036040
window.myVar = myVar
Ну тогда вот
05:38:36 ПП
User 204484928
User 272129522
просто, до вебпака, у меня создавался экземпляр класса в глобальной области видимости, и любой пользователь мог его заюзать, например, из консоли - сейчас так нельзя сделать, т.к. вебпак всё обернул. 

надо как-то вернуть пользователю возможность взаимодействовать с экземпляром этого класса. т.е., грубо говоря, вернуть его в глобальную область видимости
Output.library
05:40:02 ПП
User 204484928
User 272129522
просто, до вебпака, у меня создавался экземпляр класса в глобальной области видимости, и любой пользователь мог его заюзать, например, из консоли - сейчас так нельзя сделать, т.к. вебпак всё обернул. 

надо как-то вернуть пользователю возможность взаимодействовать с экземпляром этого класса. т.е., грубо говоря, вернуть его в глобальную область видимости
Вот эта и следующая строки

https://github.com/javascript-obfuscator/javascript-obfuscator/blob/master/webpack.config.js#L78
github.com/javascript-obfuscator/javascript-obfuscator/blob/master/webpack.config.js
javascript-obfuscator - A powerful obfuscator for JavaScript and Node.js
05:41:56 ПП
User 272129522
User 204484928
Вот эта и следующая строки

https://github.com/javascript-obfuscator/javascript-obfuscator/blob/master/webpack.config.js#L78
github.com/javascript-obfuscator/javascript-obfuscator/blob/master/webpack.config.js
javascript-obfuscator - A powerful obfuscator for JavaScript and Node.js
спасибо
05:44:47 ПП
User 272129522
на крайняк можно через импорт и в глобал записать из отдельного файла - должно работать
05:46:12 ПП
User 204484928
User 272129522
спасибо
Вот это работает, сам так npm пакет экспортирую
06:07:10 ПП
User 272129522
User 204484928
Вот это работает, сам так npm пакет экспортирую
что такое libraryTarget:  "commonjs2" в твоём примере?
06:34:33 ПП
User 272129522
приблизительно понял. сложная вещь, в общем
08:34:58 ПП
User 204484928
User 272129522
приблизительно понял. сложная вещь, в общем
Проще простого
08:34:58 ПП
User 204484928
Открой доку вебпака по этим опциям