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

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

974 members

Архив канала @webpack_ru 17 ноября 2017 г.

02:30:46 ДП
User 134905826
User 146658406
Конфиг такой. Если подсунуть пустой plugins, ничего не меняется
кажется было такое, кончилось тем что я поставил ImageminPlugin  (там есть svgo)
02:33:00 ДП
User 146658406
Который уже имеет в зависимостях более новую версию svgo и тем самым автоматом «решает проблему» :)
02:46:33 ДП
User 134905826
User 146658406
Который уже имеет в зависимостях более новую версию svgo и тем самым автоматом «решает проблему» :)
еще немного рекламы ImageminPlugin: для минификации изображений плагин лучше подходит, т.к. лоадеры проигрывают в производительности. или например когда svg подключаеься внутри HtmlWebpackPlugin(там лоадеры не всегда работают коректно)
02:52:23 ДП
User 146658406
От задачи зависит) у меня только svg и я их встраиваю в css прямо в utf8 кодировке с минимальным кол-вом escape символов. От svgo требуется только подрезать ненужное, округлить числа и тп

Слава богу с растром шаманить не надо
07:26:12 ДП
User 100151998
Всем поивет правда ли что вебпак матчит только файлы своего модуля, например с галпом  я собираю проект в vendor и main и считай в index html на главной у меня подключены сминифицированные файлы всего проекта, а если бы был вебпак то для index.html были бы только соответствующие скрипты которы относятся непосредственно к главной странице?
07:26:44 ДП
User 100151998
или вебпак так не может
07:29:33 ДП
User 134905826
User 100151998
Всем поивет правда ли что вебпак матчит только файлы своего модуля, например с галпом  я собираю проект в vendor и main и считай в index html на главной у меня подключены сминифицированные файлы всего проекта, а если бы был вебпак то для index.html были бы только соответствующие скрипты которы относятся непосредственно к главной странице?
сложно понимается, но лучше почитай табличку с примера resolve: https://webpack.js.org/configuration/resolve/
07:32:02 ДП
User 300024
Он хочет code splitting а не это. Наверное. Очень косноязычно написано
07:34:29 ДП
User 100151998
Я к тому что в сбилденном для продакшена  SPA к примеру на странице about-us подгружаются модули только about-us его css/js и зависимости только этого модуля.
07:35:18 ДП
User 100151998
что облегчает вес страницы в разы
07:36:12 ДП
User 30260375
User 100151998
Я к тому что в сбилденном для продакшена  SPA к примеру на странице about-us подгружаются модули только about-us его css/js и зависимости только этого модуля.
Есть например ленивозагружпемые модули
07:37:00 ДП
User 147771380
User 100151998
Я к тому что в сбилденном для продакшена  SPA к примеру на странице about-us подгружаются модули только about-us его css/js и зависимости только этого модуля.
Code splitting
07:39:43 ДП
User 100151998
то есть для каждой страницы свой чанк должен быть?
07:39:55 ДП
User 30260375
User 100151998
то есть для каждой страницы свой чанк должен быть?
Например так
07:40:08 ДП
User 30260375
Динамический импорт зовётся
07:40:18 ДП
User 100151998
по перфомансу гуд
07:41:04 ДП
User 30260375
Но если есть общие модули, то стоит использовать commonChunkPlugin, он из чакры может общие зависимости в один банд унести
10:27:28 ДП
User 60331718
https://gist.github.com/Fl0pZz/fcfc87420ceceee7dba01c6ece1f493a

Что делать с такой ошибкой?
ERROR in static/js/5.93ab66d4a749cd072641.js from UglifyJs
Unexpected token: name (resolvePromise) [./node_modules/vue-charts/src/utils/makeDeferred.js:6,0][static/js/5.93ab66d4a749cd072641.js:20667,6]
gist.github.com/Fl0pZz/fcfc87420ceceee7dba01c6ece1f493a
10:47:16 ДП
User 300024
устанавливать 
loaders: [  {
    test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
    }
]
или
https://github.com/webpack/webpack/issues/5449
github.com/webpack/webpack/issues/5449
Do you want to request a feature or report a bug? bug What is the current behavior? When adding the UglifyJsPlugin, I get an error like ERROR in global.js from UglifyJs Unexpected token: name (re...
10:48:01 ДП
User 212795634
User 300024
устанавливать 
loaders: [  {
    test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
    }
]
или
https://github.com/webpack/webpack/issues/5449
github.com/webpack/webpack/issues/5449
Do you want to request a feature or report a bug? bug What is the current behavior? When adding the UglifyJsPlugin, I get an error like ERROR in global.js from UglifyJs Unexpected token: name (re...
мда
10:48:28 ДП
User 212795634
es2015 пора выкинуть, лоадеры надо полностью называть
10:49:51 ДП
User 300024
User 212795634
мда
я думаю все разберутся у кого новый и старый синтаксис, пусть пробует
10:51:12 ДП
User 212795634
User 300024
я думаю все разберутся у кого новый и старый синтаксис, пусть пробует
ну пресет ес2015 явно не нужен
10:52:33 ДП
User 32530886
User 300024
устанавливать 
loaders: [  {
    test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
    }
]
или
https://github.com/webpack/webpack/issues/5449
github.com/webpack/webpack/issues/5449
Do you want to request a feature or report a bug? bug What is the current behavior? When adding the UglifyJsPlugin, I get an error like ERROR in global.js from UglifyJs Unexpected token: name (re...
вообще указывать пресеты в лоадере плохой тон
10:52:48 ДП
User 32530886
User 212795634
es2015 пора выкинуть, лоадеры надо полностью называть
не пора ещё
10:53:14 ДП
User 212795634
User 32530886
не пора ещё
он же открыто говорит что надо на env поменять
10:53:19 ДП
User 212795634
бабел
10:54:18 ДП
User 32530886
User 212795634
он же открыто говорит что надо на env поменять
я вот не хочу юзать env
10:54:24 ДП
User 32530886
ибо хочу точно знать какие плагины подключаю
10:54:37 ДП
User 32530886
я не хочу чтобы у меня сборка перестала работать в определенном окружении
10:54:44 ДП
User 32530886
я не понимаю че за долбоебизм с этим env
10:54:48 ДП
User 212795634
я не юзаю енв
10:54:59 ДП
User 32530886
он там на каких-то внутренних алгоритмах выбирает где у меня будет работать, а где нет
10:55:09 ДП
User 32530886
пойду сделаю свой пресет
10:55:14 ДП
User 32530886
как у меня уже есть node8
10:55:15 ДП
User 212795634
а без ес2015 будут плагны работать?
10:55:22 ДП
User 32530886
User 212795634
а без ес2015 будут плагны работать?
блядь пресет это просто набор плагинов под одним именем
10:55:33 ДП
User 88034558
Всем привет, есть необходимость собирать отдельно js файлы и стили, добавил стили в entry, но они также создаются в папке js/entry/[name].js как исправить?
10:55:38 ДП
User 212795634
ну блять значит можно выкинуть ес2015 и оставить плагины
10:55:54 ДП
User 32530886
User 88034558
Всем привет, есть необходимость собирать отдельно js файлы и стили, добавил стили в entry, но они также создаются в папке js/entry/[name].js как исправить?
изучить вебпак
подключение стилей делается как раз для того чтобы объединить стили и жс по своим файлам
юзаешь extract-text-webpack-plugin
10:56:52 ДП
User 300024
User 60331718
https://gist.github.com/Fl0pZz/fcfc87420ceceee7dba01c6ece1f493a

Что делать с такой ошибкой?
ERROR in static/js/5.93ab66d4a749cd072641.js from UglifyJs
Unexpected token: name (resolvePromise) [./node_modules/vue-charts/src/utils/makeDeferred.js:6,0][static/js/5.93ab66d4a749cd072641.js:20667,6]
gist.github.com/Fl0pZz/fcfc87420ceceee7dba01c6ece1f493a
Как ты там, осилил?
10:57:50 ДП
User 88034558
User 32530886
изучить вебпак
подключение стилей делается как раз для того чтобы объединить стили и жс по своим файлам
юзаешь extract-text-webpack-plugin
его и юзаю, но стили дублируются в свою папку и в папку с js с расширением js как пустые вебпак модули
10:58:15 ДП
User 32530886
User 88034558
его и юзаю, но стили дублируются в свою папку и в папку с js с расширением js как пустые вебпак модули
конфиг покажи
10:59:16 ДП
User 147771380
User 88034558
его и юзаю, но стили дублируются в свою папку и в папку с js с расширением js как пустые вебпак модули
Ну у тебя отдельный бандл для них создаётся
10:59:25 ДП
User 147771380
Ты же в энтри впихал их
10:59:28 ДП
User 88034558
User 32530886
конфиг покажи
https://codepen.io/anon/pen/aVVqaq?editors=0010
codepen.io/anon/pen/aVVqaq?editors=0010
...
10:59:40 ДП
User 147771380
Можешь просто проигнорировать тот файлик, тебе что, жалко?)
11:06:01 ДП
User 60331718
User 300024
Как ты там, осилил?
я понял в чем трабла
фишка в том, что это не мой код валится, а валится код в сторонней либе
и вот там есть .common.js билд который ок - https://github.com/Fl0pZz/vue-charts/blob/master/dist/vue-charts.common.js#L15

однако при подключении в свой проект, яполучает не транспилированный код
github.com/Fl0pZz/vue-charts/blob/master/dist/vue-charts.common.js
vue-charts - Google Charts plugin for Vue.js
11:07:59 ДП
User 76662447
В вебпаке есть контекст рерайт
11:08:08 ДП
User 355846509
resolve: {
    extensions: ['.js', '.vue', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@shared': path.resolve(__dirname, 'sharedComponents/')
    },
11:08:08 ДП
User 355846509
Module not found: Error: Can't resolve '@shared/Button' in  ...
11:08:08 ДП
User 355846509
что я делаю не так?
11:08:17 ДП
User 355846509
Всем привет)
11:08:18 ДП
User 60331718
User 60331718
я понял в чем трабла
фишка в том, что это не мой код валится, а валится код в сторонней либе
и вот там есть .common.js билд который ок - https://github.com/Fl0pZz/vue-charts/blob/master/dist/vue-charts.common.js#L15

однако при подключении в свой проект, яполучает не транспилированный код
github.com/Fl0pZz/vue-charts/blob/master/dist/vue-charts.common.js
vue-charts - Google Charts plugin for Vue.js
вот скрин кода из чанка, где  let на var не заменян
11:11:44 ДП
User 60331718
User 76662447
В вебпаке есть контекст рерайт
он есть только в первом, в 3м его уже нет
11:12:03 ДП
User 300024
User 60331718
вот скрин кода из чанка, где  let на var не заменян
и так понятно было где ошибка, ты в логе и написал
оно не ес5, поэтому углифай ругается,
11:12:07 ДП
User 76662447
Нет, значит я про другое
11:12:14 ДП
User 60331718
User 355846509
resolve: {
    extensions: ['.js', '.vue', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@shared': path.resolve(__dirname, 'sharedComponents/')
    },
у тебя __dirname не на ту пупку указывает скорее всего
11:12:29 ДП
User 76662447
Сейчас до ноутбука дойду поясню
11:13:17 ДП
User 32530886
User 355846509
resolve: {
    extensions: ['.js', '.vue', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@shared': path.resolve(__dirname, 'sharedComponents/')
    },
всё потому что vue
11:15:40 ДП
User 355846509
User 60331718
у тебя __dirname не на ту пупку указывает скорее всего
Всё относительно точки входа ноды, а это поле - относительно конфига!! Проверил -- правда.
11:16:12 ДП
User 355846509
User 32530886
всё потому что vue
Я даже знаю что бы "при любых условиях" работало))
11:27:25 ДП
User 76662447
User 60331718
он есть только в первом, в 3м его уже нет
Конкретно из моего текущего билда: new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/),
11:27:35 ДП
User 76662447
Так что всё на месте
11:27:51 ДП
User 76662447
А тебе кстати и alias подойдет
11:30:07 ДП
User 60331718
User 355846509
resolve: {
    extensions: ['.js', '.vue', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@shared': path.resolve(__dirname, 'sharedComponents/')
    },
а тебе нужно просто вот так сделать:
resolve: {
    extensions: ['.js', '.vue', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@shared': resolve('sharedComponents/')
    },
11:30:30 ДП
User 60331718
User 60331718
а тебе нужно просто вот так сделать:
resolve: {
    extensions: ['.js', '.vue', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@shared': resolve('sharedComponents/')
    },
скорее всего resolve у тебя уже определенно на 6й строчке
11:30:49 ДП
User 32530886
User 60331718
а тебе нужно просто вот так сделать:
resolve: {
    extensions: ['.js', '.vue', '.ts'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@shared': resolve('sharedComponents/')
    },
алиасы не нужны
11:31:10 ДП
User 60331718
User 32530886
алиасы не нужны
?
11:31:27 ДП
User 32530886
не надо их вообще юзать
11:31:51 ДП
User 355846509
User 60331718
?
Они слишком простые. На них нельзя сделать серьёзное приложение. Забей)
11:32:15 ДП
User 355846509
нужен чёткий контроль в каждом модуле что откуда грузится.
11:32:36 ДП
User 355846509
А алиасы только путают.
11:33:01 ДП
User 32530886
User 355846509
А алиасы только путают.
+
11:33:02 ДП
User 60331718
блять, ой лол, я понял, откуда уменя ошибка тянется 🤦‍♂️
11:33:19 ДП
11:33:25 ДП
User 355846509
User 60331718
скорее всего resolve у тебя уже определенно на 6й строчке
Не, всё через path модуль. Всё норм настроил, спасибо.
11:34:35 ДП
User 60331718
User 60331718
так, а почему эта фигня не транспилировалась то?
11:34:37 ДП
User 32530886
User 60331718
зачем в src?
11:34:44 ДП
User 32530886
User 60331718
так, а почему эта фигня не транспилировалась то?
потому что это исходник
11:34:48 ДП
User 32530886
из node_modules
11:34:54 ДП
User 32530886
который в exclude в лоадере
11:35:00 ДП
User 32530886
src != dist
11:35:24 ДП
User 60331718
User 32530886
потому что это исходник
именно, об этом и говорю
11:35:36 ДП
User 60331718
но тянуть пришлось, потому что там чувак очень ущербно все написал
11:36:24 ДП
User 32530886
User 60331718
именно, об этом и говорю
ну эм
11:36:32 ДП
User 32530886
потому что exclude в лоадере
11:36:39 ДП
User 32530886
exclude: /node_modules/
11:36:44 ДП
User 60331718
https://github.com/Fl0pZz/vue-charts/blob/master/src/main.js

для тех кто не использует вью:
тут компонента делается глобальной, мне это ваще не нужно
github.com/Fl0pZz/vue-charts/blob/master/src/main.js
vue-charts - Google Charts plugin for Vue.js
11:37:40 ДП
User 60331718
User 32530886
exclude: /node_modules/
неа, у себя в конфиге не нашел
11:37:52 ДП
User 32530886
кинь конф
11:40:25 ДП
User 60331718
https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.base.conf.js
github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.base.conf.js
webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
11:40:44 ДП
User 60331718
я так понимаю, что тут нужно еще в include дописать нужный путь
11:44:42 ДП
User 60331718
User 60331718
я так понимаю, что тут нужно еще в include дописать нужный путь
resolve(path.join('node_modules', 'vue-charts'))
все, это решило траблу