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

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

974 members

Архив канала @webpack_ru 11 мая 2017 г.

03:33:20 ПП
User 127482995
ДОброго времени суток, ранее использовал gulp , тут стоклнулся с webpack, решил настроить чтобы css обрабатывался через sass postcss autoprefixer, вроде все настроил как надо, но есть вопросы может ошибся. Подключение самого файла scss надо делать в подключаемом js файле? import './css/main.scss' ?
03:33:37 ПП
User 351146
да, прямо в js
03:34:01 ПП
User 351146
но надо настроить лоадер
03:34:22 ПП
User 127482995
получаю такую ошибку
Module parse failed: main.scss Unexpecte
d token (1:11)
You may need an appropriate loader to handle this file type.
| $main-color: #f2f2f2;
| $width-item: 100% / 3;
| html {
 @ ./src/main.js 3:0-25
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/m
ain.js
03:34:47 ПП
User 351146
module.rules: [ ] и там             {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: cssLoaderOptions
                    }
                ]
            },
03:35:00 ПП
User 351146
аналогично для less/scss, но там еще один лоадер надо добавить
03:35:30 ПП
User 351146
синтаксис webpack2, если что
03:35:34 ПП
03:35:43 ПП
User 351146
а у тебя первый походу
03:35:58 ПП
User 351146
скопирни строчку для scss и убери оттуда sass
03:36:21 ПП
User 127482995
версия 2.5.1
03:37:15 ПП
User 351146
мм, тогда добавь в rules             {
                test: /\.(scss|sass)$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },
                    {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: cssLoaderOptions
                    },
                    {
                        loader: "sass-loader", // compiles Sass to CSS
                        options: {
                            sourceMap: useSourcemaps,
                            sourceMapContents: true
                        }
                    }
                ]
            },
03:37:33 ПП
User 351146
адаптируй конечно под себя переменные и прочее
03:43:29 ПП
User 127482995
вот такой в итоге получился конфиг и он не запустился)
03:44:38 ПП
User 127482995
какие опции должы быть прописаны в cssLoaderOptions ?
03:45:23 ПП
User 351146
как пример )
03:45:57 ПП
User 127482995
User 351146
как пример )
благодарю!)
03:46:07 ПП
User 127482995
gulp как то попроще дался в настройке))
03:46:24 ПП
User 351146
у меня ровно такая же история, сначала gulp, потом webpack
03:46:38 ПП
User 351146
с галпом проблем было больше с путями к ассетам
03:47:27 ПП
User 127482995
ну да было что тотакое но разобрался быстро, а тут вообще как то все по другому и не въехал сразу, сейчас хоть прояснилось все более менее
04:58:41 ПП
User 90824146
Это чат про настройку вебпака?
04:59:34 ПП
04:59:48 ПП
User 90824146
Как пропатчить harmony под closure compiler?
04:59:58 ПП
User 1340580
Шутка минутка.
05:00:07 ПП
User 90824146
Ну или покажите строку в исходниках, я сам поправлю
06:39:57 ПП
User 351146
Собственно, что хотел спросить
06:39:57 ПП
User 351146
например :) Tree Shaking никак не вырежет неиспользуемые функции, только модули целиком? Допустим, я подключил себе babel-polyfill, там много чего хорошего, но (допустим) использовать я хочу сейчас только Object.assign
06:39:57 ПП
User 351146
или я слишком замечтался тут?
06:39:57 ПП
User 351146
не хотелось бы заморачиваться и по одному подключать полифиллы
06:39:57 ПП
User 351146
Вообще, судя по документации вебпака, он вырежет неиспользуемые функции
06:39:57 ПП
User 351146
мне тоже так казалось
06:39:57 ПП
User 351146
но либо я неправильно готовлю, либо нет
06:43:52 ПП
User 90824146
Точно не скажу, надо тестить. Сделай проект, подключи туда бабель-полифил, заюзай одну функцию и посмотри на результат бандле.

Судя по гуглу, наработки в этом плане есть, но не до конца понятно, тот ли это кейс, как у тебя. http://2ality.com/2015/12/webpack-tree-shaking.html
06:43:53 ПП
User 351146
м, кстати тот же closure compiler это чуть ли не умел делать, но иногда ломал код
06:44:38 ПП
User 90824146
User 351146
м, кстати тот же closure compiler это чуть ли не умел делать, но иногда ломал код
Да, я как раз с этим и борюсь. Вебпак (сюрприз-сюрприз) написан так, что его нельзя по-максимуму оптимизировать
06:44:56 ПП
User 90824146
Соответственно, closure на максималках его ломает нафиг
06:47:07 ПП
User 90824146
Я сегодня сделал пулл-реквест в доку, у него довольно смешная история создания: сидел и несколько часов перебирал все возможные комбинации настроек, чтобы понять, как оно работает.
https://github.com/webpack/webpack.js.org/pull/1206
github.com/webpack/webpack.js.org/pull/1206
Added a usecase of externals that bothered me for a while while authoring a library.
06:47:20 ПП
User 90824146
Потому что новая дока тоже мало что проясняет.
06:49:48 ПП
User 351146
User 90824146
Точно не скажу, надо тестить. Сделай проект, подключи туда бабель-полифил, заюзай одну функцию и посмотри на результат бандле.

Судя по гуглу, наработки в этом плане есть, но не до конца понятно, тот ли это кейс, как у тебя. http://2ality.com/2015/12/webpack-tree-shaking.html
не, подтягивает сразу целиком. Если взять jquery и его не использовать - не подтянет, но первое же его использование тоже его включит целиком в проект
06:50:31 ПП
User 351146
Ну окей, тогда переформулирую - есть ли способы кроме closure compiler (или есть ли в разработке) добиться такого поведения
06:55:26 ПП
User 351146
т.к. алгоритмически в принципе это возможно
06:55:32 ПП
User 351146
хоть и непросто
06:56:16 ПП
User 90824146
Обычно это делается на уровне либ, а не компилятора. На уровне компилятора сам сейчас разбираюсь, как видишь.
06:56:21 ПП
06:56:59 ПП
User 122550876
Тот же lodash изначально так спроектирован
06:57:19 ПП
User 351146
кстати lodash как пример вообще отлично подходит в данном случае
06:57:39 ПП
User 90824146
Да, его поэтому в доке и указывают
06:57:44 ПП
User 351146
надо на нем тестово попробовать :)
06:58:01 ПП
User 351146
но если они из него импортируют только часть функций самостоятельно - это не совсем то что я хотел
06:58:11 ПП
User 351146
точнее, совсем не то
07:02:21 ПП
User 90824146
Я удивился, что вебпак написан на js
07:03:05 ПП
User 351146
на чем же еще :)
07:03:31 ПП
User 351146
делаешь инструмент для js - самое логичное написать его на js, чтобы не тянуть зависимости
07:03:42 ПП
User 90824146
плюсы наше все
07:03:54 ПП
User 351146
разве что для скорости, но она тут и так неплохая очень
07:04:47 ПП
User 90824146
Смотря для чего, у меня билдится сразу десяток проектов, поэтому приходится ждать 5 мин.
07:05:11 ПП
User 90824146
и 10 секунд бутстрапа проекта—тоже не ок, я срался в твитторе по этому поводу с авторами
07:05:15 ПП
User 122550876
зачем так жить-то?
07:05:30 ПП
User 351146
ну это билд, окей, а при разработке то быстро?
07:05:39 ПП
User 351146
с вотчером
07:05:54 ПП
User 90824146
Вотчер иногда тупит, так что когда как
07:06:15 ПП
User 351146
я у вотчера отключаю минификацию и что только можно, это помогло
07:06:56 ПП
User 90824146
Ну при разработке не проблема, согласен
07:07:29 ПП
User 90824146
User 122550876
зачем так жить-то?
Приходится делать сложные вещи. Может, через несколько месяцев смогу показать.
07:07:54 ПП
User 122550876
ну просто 10 проектов сразу собирать
07:08:11 ПП
User 351146
а, бтв, их можно параллельно билдить если они все разные
07:08:55 ПП
User 90824146
🤔 надо подумать, они юзают один и тот же базовый код, но форкаются по фичам
07:09:42 ПП
User 351146
буквально сегодня видел готовый пакет в npm для этого, думаю найти легко
07:09:44 ПП
User 351146
не помню название
07:09:59 ПП
User 90824146
если увидишь, свистни, посмотрю
07:10:18 ПП
User 351146
https://www.npmjs.com/package/parallel-webpack собственно
npmjs.com/package/parallel-webpack
Builds multiple webpack configurations in parallel and allows you to easily create variants to those configurations.
07:10:54 ПП
User 90824146
о, выглядит, как моя тема, спасибо