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

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

974 members

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

06:54:39 ДП
User 32530886
User 207638731
У кого есть конфиг на реакт от webpack 4?
Не рано ли?
06:55:18 ДП
User 97102774
User 32530886
Не рано ли?
Ну это не обязательно для прода.
06:55:31 ДП
User 97102774
А так - баги можно найти, которые за пару месяцев исправят.
06:55:41 ДП
User 97102774
Так что запрос оправдан)
07:29:10 ДП
User 207638731
Хотите сказать что рано испольовать?
07:29:41 ДП
User 32530886
User 207638731
Хотите сказать что рано испольовать?
Плагины ещё далеко не все поддерживаются
07:30:18 ДП
User 207638731
ясно) лучше пока на третьем буду делать
08:31:25 ДП
User 139059931
Ребят, помогите пожалуйста с код сплитингом.
есть (к примеру) пакеты: 'components' и 'logic'.
я хочу импортировать их в bundle и инициализировать, разделив весь код на 4 чанка:
1. Bundle - основной, содержит Immutable.js, подгружает модули.
2. Components - тоже содержит immutable.js
3. Logic - какой-то пакедж
4. Common - зависимости из нод модулей.
08:31:33 ДП
08:32:18 ДП
User 139059931
в итоге получается такая картина:
08:32:22 ДП
08:33:10 ДП
User 139059931
вопрос - как выпилить immutable из bundle?)
08:34:48 ДП
User 32530886
User 139059931
вопрос - как выпилить immutable из bundle?)
npm uninstall immutable
08:35:05 ДП
08:38:01 ДП
User 139059931
как я понимаю такое возможно только в 4м вебпаке?
08:39:42 ДП
User 99532118
а я думал что сплитят обычно по самописному коду только, а зависимости по мере необходимости
08:40:20 ДП
User 32530886
User 139059931
ну тут сложный вопрос
08:40:27 ДП
User 32530886
нужно был делать vendor чанк
08:40:58 ДП
User 139059931
User 32530886
нужно был делать vendor чанк
оке, вендор, но его нельзя загрузить через import
08:41:09 ДП
User 32530886
а зачем?
08:41:18 ДП
User 32530886
суть же вендора в том, что он юзается везде по проекту
08:41:23 ДП
User 32530886
его закешировал и всё
08:41:56 ДП
User 139059931
ну, это виджеты интегрируемые, так что приходится выпендриваться
08:42:22 ДП
User 139059931
сначала все эти модули будут прифетчиться, и потом дотягиваться уже в бандле
08:42:34 ДП
08:42:36 ДП
User 32530886
ну хз
08:42:42 ДП
User 32530886
надо думать по серьезному
08:42:45 ДП
User 139059931
я не могу гарантировать последовательность их загрузки (
08:42:59 ДП
User 139059931
User 32530886
надо думать по серьезному
а ты думаешь чего я тут спросил :)
08:43:21 ДП
User 32530886
User 139059931
вопрос - как выпилить immutable из bundle?)
а куда ты его выпилить хочешь?
08:44:26 ДП
User 139059931
User 32530886
а куда ты его выпилить хочешь?
common-bundle, он уюзается в пакетах загружаемых асинхронно, и в bundle - который статичный
08:45:09 ДП
User 139059931
можно конечно изподвыпендриться и асинхронно же загрузить initialize, тогда bundle превратится просто в лоадер зависимостей и вебпаковский рантайм
09:03:25 ДП
User 32530886
доку обновили
09:04:52 ДП
User 32530886
хотя нет
это только бейджик
09:05:31 ДП
User 394491336
Привет всем, подскажите как решить задачу. Есть fullpage.js, в котором есть его additional vendor lib, который очень важно подключить ДО самого fullpage.js. В моем случаи я собираю vendor chunk с помощью CommonsChunkPlugin, но не могу понять как влиять на ордеринг, т.к. судя по логу и по файлу, такое ощещение что webpack скрипты подключает в алфавитном порядке, а не в том который указываешь, и повлиять пока  у меня на это не получается =) как быть?
09:06:18 ДП
User 317866423
User 32530886
хотя нет
это только бейджик
видимо только начали обновлять)
09:07:14 ДП
User 134905826
User 317866423
видимо только начали обновлять)
нее, просто https://img.shields.io/npm/v/webpack.svg дергает последний релиз.
09:13:58 ДП
09:27:36 ДП
User 207638731
Не знаете, почему не запускается dev-server 
TypeError: Cannot read property 'compile' of undefined
09:30:44 ДП
User 394491336
User 207638731
Не знаете, почему не запускается dev-server 
TypeError: Cannot read property 'compile' of undefined
Это Angular?
09:30:55 ДП
User 207638731
User 394491336
Это Angular?
react
09:47:46 ДП
User 32530886
User 207638731
Не знаете, почему не запускается dev-server 
TypeError: Cannot read property 'compile' of undefined
Код покажи
09:48:44 ДП
User 207638731
User 32530886
Код покажи
09:58:08 ДП
User 317866423
какой-то у тебя public path странный
09:58:24 ДП
User 317866423
а про typeerror мб косяк с бабелем?
10:31:40 ДП
User 32530886
User 207638731
publicPath это путь относительно браузера
10:31:49 ДП
User 32530886
там должен быть / либо /dist/
01:33:12 ПП
User 159499863
Всем привет. Есть приложение на angular. Вынес часть кода в модуль, написал к нему собственный package.json. Теперь это собирается как библиотека. Т.к все это в проекте, который управляется maven, просто подключаю ее через package.json, указывая относительный путь до модуля maven и до dist собранной библиотеки. Делая в проекте npm install моя библиотека нормально попадает в node_modules, но пытаясь собрать проект или запустить его с webpack dev server, я получаю ошибку Module not found: Error: Can't resolve library-name/filename. В node_modules данный каталог присутствует, и файл есть.
01:34:32 ПП
User 488835159
Тут вебпаки 3 и 4 не обсуждаются?
01:38:18 ПП
User 30260375
User 488835159
Тут вебпаки 3 и 4 не обсуждаются?
Обсуждаются
01:40:07 ПП
User 134905826
User 159499863
Всем привет. Есть приложение на angular. Вынес часть кода в модуль, написал к нему собственный package.json. Теперь это собирается как библиотека. Т.к все это в проекте, который управляется maven, просто подключаю ее через package.json, указывая относительный путь до модуля maven и до dist собранной библиотеки. Делая в проекте npm install моя библиотека нормально попадает в node_modules, но пытаясь собрать проект или запустить его с webpack dev server, я получаю ошибку Module not found: Error: Can't resolve library-name/filename. В node_modules данный каталог присутствует, и файл есть.
https://webpack.js.org/configuration/resolve/
01:40:27 ПП
User 488835159
Так уберите 1/2 из описания плиз
01:48:06 ПП
User 32530886
User 488835159
Так уберите 1/2 из описания плиз
+
01:48:23 ПП
User 488835159
Спасибо!
02:04:03 ПП
User 159499863
User 134905826
https://webpack.js.org/configuration/resolve/
Так библиотека лежит в node_modules и все остальное из этого node_modules нормально находит.
02:49:43 ПП
User 291325765
Всем счастья:) 
Подскажите как webpack собирает модули на странице ?
Есть некоторый объект modules, внутри которго хранятся id модулей и вебпак их вызывает вот так  

modules[moduleId].call(module.exports, module, module.exports, webpack_require);

Вопрос modules глобальный объект ?
что будет ели на 1 странице подрубить сразу 2 бандла которые собирались разными сборщиками?
03:52:29 ПП
User 32530886
User 291325765
Всем счастья:) 
Подскажите как webpack собирает модули на странице ?
Есть некоторый объект modules, внутри которго хранятся id модулей и вебпак их вызывает вот так  

modules[moduleId].call(module.exports, module, module.exports, webpack_require);

Вопрос modules глобальный объект ?
что будет ели на 1 странице подрубить сразу 2 бандла которые собирались разными сборщиками?
все будет нормально
03:52:42 ПП
User 32530886
в вебпаке эти модули не глобальны
03:52:45 ПП
User 32530886
до тех пор пока не юзаешь разбиение на чанки
03:53:23 ПП
User 346591800
Добрый день.
Кто подскажет как избавится от ошибки Uncaught ReferenceError: WEBPACK_AMD_DEFINE_ARRAY is not defined?
Выкидывает в консоль только на старых моб бразуерах.
webpack + babel + react
03:58:28 ПП
User 291325765
User 32530886
до тех пор пока не юзаешь разбиение на чанки
Санки юзаю ) есть вероятность что одни модули могут затереть другие ? И как это решить ?
03:58:46 ПП
User 488835159
санки..
03:59:21 ПП
User 112715267
User 488835159
санки..
Я только сейчас осознал 🤔
03:59:28 ПП
User 112715267
Санки лол
04:00:28 ПП
User 32530886
User 291325765
Санки юзаю ) есть вероятность что одни модули могут затереть другие ? И как это решить ?
санки != чанки
04:02:57 ПП
User 394491336
Ребят ну что правда с проблемами очередности подключения модулей никто не сталкивался? Или я чет серьезно не догоняю =)
04:08:54 ПП
User 291325765
User 488835159
санки..
04:14:40 ПП
User 488835159
User 291325765
Ельцин был скином
04:15:13 ПП
User 291325765
User 394491336
Ребят ну что правда с проблемами очередности подключения модулей никто не сталкивался? Или я чет серьезно не догоняю =)
ты о чем ?
04:20:00 ПП
User 394491336
User 291325765
ты о чем ?
Да я писал ранее, повторю, может я не верно выражаю мысль.

Webpack на сколько я понимаю, позволяет собираться отдельный например vendor chunk с помощью CommonsChunkPlugin

В него судя по документации, можно передать либо массив модулей для компановки чанка, либо елемент entry который тоже массив =)

Я использую модуль а конкретно fullpage.js который имеет в себе отдельный его vendor lib который необходимо подключить обязательно ДО самого fullpage.js

Но ситуация такая, либо я ошибаюсь что вполне вероятно, что CommonsChunkPlugin собирает бандл без ордеринга, и отдельный файл который необходимо подключать до, в итоге в бандл попадает после

Т.е. вопрос в том как подключить конкретный модель ДО другого конкретного модуля?
04:21:27 ПП
User 394491336
Или порядок после сборки вообще не имеет значения и проблема в чем то другом =)
04:26:37 ПП
User 291325765
просто сунь этот пакет руками в enty common
04:26:38 ПП
User 291325765
entry: {
    common: ['babel-polyfill'],
    calc: ['./entries/calc'],
    catalog: ['./entries/catalog'],
    search: ['./entries/search'],
  },
04:26:45 ПП
User 291325765
@sandreychenko
04:26:49 ПП
User 291325765
должно работать
04:29:55 ПП
User 394491336
Так тоже пробывал
vendor: [
      'jquery',
      'fullpage.js/vendors/scrolloverflow.min.js',
      'fullpage.js'
    ]
который попадает в 

new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: Infinity }),
04:32:48 ПП
User 394491336
User 291325765
должно работать
Говорит что IScroll is not defined

Это обьект который должен прилететь из scrolloverflow.min.js

далее чтобы обьект попал в глобал область я пихаю его через 

new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'jquery': 'jQuery',
      'window.jQuery': 'jquery',
      IScroll: 'fullpage.js/vendors/scrolloverflow.min.js'
    })
04:33:28 ПП
User 291325765
проверь его на странице в консоле
04:33:36 ПП
User 291325765
window.IScroll
04:33:54 ПП
User 394491336
и получаю Cannot set property 'wheelOn' of undefined

полагаю из-за того что обьек  IScroll теперь есть, правда в глобал область он не попал
04:34:10 ПП
User 394491336
User 291325765
window.IScroll
undefined
04:34:16 ПП
04:34:24 ПП
User 291325765
а есть у тебя cdn
04:34:25 ПП
User 394491336
т.е. получается через ProvidePlugin он подключел ничего =)
04:34:26 ПП
04:34:49 ПП
User 394491336
в смысле выложить куданьть глянуть?
04:35:03 ПП
User 291325765
посмотри что делает плагин /scrolloverflow.min.js
04:35:12 ПП
User 291325765
а не пробовал его сунуть в cdn ?
04:35:38 ПП
User 394491336
User 291325765
а не пробовал его сунуть в cdn ?
https://github.com/alvarotrigo/fullPage.js/blob/master/vendors/scrolloverflow.js
github.com/alvarotrigo/fullPage.js/blob/master/vendors/scrolloverflow.js
fullPage.js - fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
04:35:47 ПП
User 394491336
неа, надо протестить
04:36:00 ПП
User 291325765
у тебя файлик скорее в сего не модуль
04:36:17 ПП
User 291325765
тут ты конкретно привязываешь переменной модуль
04:37:06 ПП
User 394491336
а как в таких случаях быть в вебпаке?
04:37:13 ПП
User 291325765
го в личку пока на не наругали :)
04:44:43 ПП
User 291325765
вопрос такой кто то запускает на винде webpack конфиге es6 ?
04:44:54 ПП
User 488835159
В чем суть вопроса?
04:45:33 ПП
User 291325765
на маке делаю вот так "build": "babel-node ./node_modules/.bin/webpack —config conf/webpack.build.js",
но если запустить такое на винде все херами покрывается
04:45:37 ПП
User 291325765
то бабель не бабель
04:45:44 ПП
User 291325765
то путь до вебпака не тот
04:45:47 ПП
04:46:02 ПП
User 488835159
ошибка?
04:46:18 ПП
User 291325765
в кочном итоге ошибка 


$ babel-node ./node_modules/.bin/webpack —config conf/webpack.prod.js
C:\Users\igorp\mcity\client-wc\node_modules\.bin\webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Module._extensions..js (module.js:654:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\igorp\mcity\client-wc\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at Object.<anonymous> (C:\Users\igorp\mcity\client-wc\node_modules\babel-cli\lib\_babel-node.js:154:22)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\\Windows\\system32\\cmd.exe
Arguments: /d /s /c babel-node ./node_modules/.bin/webpack —config conf/webpack.prod.js
Directory: C:\\Users\\igorp\\mcity\\client-wc
Output:
".
04:46:59 ПП
User 32530886
жесть
04:51:04 ПП
User 291325765
что я делаю не так ?
04:51:55 ПП
User 488835159
У меня было подобное когда я поверх 3 вебпака поставил 4
07:24:07 ПП
User 207638731
почему webpack спрашивает webpack-cli и зачем оно?
07:25:18 ПП
User 488835159
CLI для вебперди
09:19:19 ПП
User 133277047
Ребзя, мне кажется что я далеко не первый спрашиваю этот вопрос, но могу ли я в конфиге вебпака указать что бы он определенный  stylus файл компилил в css и клал в ./dist
09:19:55 ПП
User 133277047
сейчас я это сделал импортом в самой vue аппликухе, но что-то мне это не нравится
09:34:14 ПП
User 291325765
я делал плагинчик, но в итоге понял что лучший вариант инключить в js
09:35:48 ПП
User 133277047
User 291325765
я делал плагинчик, но в итоге понял что лучший вариант инключить в js
просто получается что стили грузятся вместе с жс и стили прыгают иногда
09:36:09 ПП
User 291325765
ну ты в билде их экспорти в файлик
09:36:38 ПП
User 291325765
у тебя в конечно итоге в продакшен битде будет js и css
09:37:46 ПП
User 133277047
User 291325765
у тебя в конечно итоге в продакшен битде будет js и css
вот, это и надо. но есть стили которые в vue задаю(где стили под конкретные компоненты нужны), а есть отдельный файл с общими стилями
09:37:59 ПП
User 133277047
вот хотелось бы сконвертить только отдельный файл в css
09:38:31 ПП
User 133277047
а те примеры, что я находил все стили конвертят в файлик
09:39:19 ПП
User 291325765
ну так что тебе мешает сделать разные лоадеры для них
09:39:49 ПП
User 291325765
{
        test: /\.styl$/,
        loader: ExtractTextPlugin.extract({
          fallback: require.resolve('style-loader'),
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                sourceMap: true,
              },
            },
            {
              loader: require.resolve('postcss-loader'),
              options: {
                sourceMap: true,
                plugins: () => [
                  require('postcss-cssnext'),
                  require('postcss-assets'),
                  require('postcss-flexbugs-fixes'),
                ],
              },
            },
            {
              loader: require.resolve('stylus-loader'),
              options: {
                sourceMap: true,
              },
            },
          ],
        }),
      },
09:39:58 ПП
User 291325765
это для тех чтьо экспортить
09:40:27 ПП
User 291325765
{
        test: /\.component.css$/,
        use: [
          {
            loader: require.resolve('css-loader'),
            options: {
              modules: false,
            },
          },
        ],
      },
09:40:34 ПП
User 291325765
для тех которые не нужно вынимать
09:40:46 ПП
User 291325765
там не юзаешь  ExtractTextPlugin.extract({
09:40:56 ПП
User 133277047
спасибо, попробую применить
09:41:22 ПП
User 291325765
ну это первое что пришло в голову