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

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

974 members

Архив канала @webpack_ru 16 апреля 2018 г.

05:43:31 ДП
User 122087672
запланировано аж на вебпак 5
05:44:54 ДП
User 212795634
Надеюсь не добавят
05:50:35 ДП
User 1191210
User 212795634
Надеюсь не добавят
Why?
06:02:54 ДП
User 212795634
User 1191210
Why?
Это веб пак а не html pack
06:04:07 ДП
User 67164223
User 1191210
всем привет. есть вопрос. как называеться настройка, когда у меня в index.html, есть script tags у которых src=/Folder/file.js, и мне нужно, что б вебпак это зарезолвил
тебе html Plugin нужен. Там укажешь куда и как инжектить
06:33:54 ДП
User 122087672
User 212795634
Это веб пак а не html pack
то есть html в твоем понимании не входит в понятие веб?
06:37:40 ДП
User 212795634
User 122087672
то есть html в твоем понимании не входит в понятие веб?
Это не та фича, которая должна быть в core
06:38:23 ДП
User 122087672
User 212795634
Это не та фича, которая должна быть в core
я думаю это как раз та фича. не должно быть разницы какой тип у entry point
06:39:42 ДП
User 212795634
Ага, давайте еще и css loader впихнем, че цсс это не веб что ли? Все же им пользуются!
06:44:16 ДП
User 212795634
О чем можно говорить, если даже cli вынесли в отдельный пакет
06:56:42 ДП
User 82830343
User 1191210
Why?
для этого есть html-webpack-plugin
07:27:30 ДП
User 67164223
User 66779439
как вы конфигурируете webpack для prod и dev ?
два отдельных конфига или в одном только строите все по условию типа
const rootDir = PROD ? 'src' : 'dev'; ?

у меня конфиги почти идентичны за исключением плагинов, rules и путей
один объект, где подключены общие модули. По условию, через вебпак-мердж, добавляю доп.модули для дев или прод
07:40:57 ДП
User 335034656
всем привет
07:41:30 ДП
User 212795634
mode: 'production' пропиши для начала в конфиге
07:41:34 ДП
User 335034656
как уменьшить размер файла? подлючено реакт, реакт-дом, полифил для фетч, создано два компонента - но размер 2мб
07:41:47 ДП
User 212795634
User 212795634
mode: 'production' пропиши для начала в конфиге
4 веб пак нужен
07:42:51 ДП
User 135278254
User 335034656
как уменьшить размер файла? подлючено реакт, реакт-дом, полифил для фетч, создано два компонента - но размер 2мб
добавь BundleAnalyzerPlugin и посмотри что занимает место в бандле
07:44:48 ДП
User 335034656
добавил - ументшил совсем не намного
07:45:13 ДП
User 335034656
а не то я добавил
07:46:50 ДП
User 335034656
User 135278254
добавь BundleAnalyzerPlugin и посмотри что занимает место в бандле
входит в состав webpack?
07:47:55 ДП
User 135278254
это же все элементарно гуглится, сам по себе BundleAnalyzerPlugin не уменьшит размер бандла, он лишь покажет, из чего состоит бандл
07:48:18 ДП
User 135278254
а дальше уже разработчик должен взять дело в свои руки
07:49:29 ДП
User 335034656
User 135278254
это же все элементарно гуглится, сам по себе BundleAnalyzerPlugin не уменьшит размер бандла, он лишь покажет, из чего состоит бандл
когда ты изучал вопрос тебе было приятно когда тебя посылали в гугл?
07:50:42 ДП
User 135278254
я подсказал тебе направление в котором стоит смотреть, чтобы понять почему бандл большой, банально открыть документацию к плагину и увидеть, как он работает и что он делает
07:53:37 ДП
User 67164223
User 335034656
как уменьшить размер файла? подлючено реакт, реакт-дом, полифил для фетч, создано два компонента - но размер 2мб
ты в продакшн билдишь?
07:54:59 ДП
User 335034656
User 67164223
ты в продакшн билдишь?
ну мы пробуем продакшн файл смотреть со всех сторон
07:55:06 ДП
User 335034656
и вот то что весит 2мб - не нравится
07:55:18 ДП
User 67164223
есть код посмотреть?
07:55:28 ДП
User 67164223
и да, заюзай вебпак аналайзер
07:56:25 ДП
User 166266621
привет всем заценил 4 вебпак классный
07:56:46 ДП
User 67164223
оставайтесь на линии, ваше мнение очень важно для нас
07:57:16 ДП
07:59:10 ДП
User 335034656
reactDOM дохера занимает
07:59:18 ДП
User 335034656
код - чисто реактовский
07:59:22 ДП
User 335034656
там два компонета
07:59:28 ДП
User 335034656
родительский и дочерний
07:59:38 ДП
User 61416070
User 335034656
reactDOM дохера занимает
это сколько?
07:59:39 ДП
User 335034656
выводится одна строчка типа хэлоуворда
07:59:50 ДП
08:00:17 ДП
User 335034656
соврал
08:00:19 ДП
08:01:20 ДП
08:01:29 ДП
08:01:37 ДП
User 61416070
это до хера конечно
08:02:04 ДП
User 335034656
анализхатор вряд ли врет
08:02:10 ДП
User 335034656
не находишь?
08:02:15 ДП
User 41482050
Нужна помощь. сть библиотека, которая импортится самым обычным es6 импортом. Внутри у нее есть строчки, которые по сути добавляют глобальную переменную:
if (!window.dhtmlxValidation) {
        dhtmlxValidation = function(){};
        dhtmlxValidation.prototype = {.....}
        ....
}После сборки бандла, выходит dhtmlxValidation is not defined. Что делать?
08:02:17 ДП
User 61416070
нахожу
08:02:25 ДП
User 61416070
я тебе реальные данные привел
08:02:28 ДП
User 61416070
а не виртуальные
08:02:30 ДП
08:02:36 ДП
User 61416070
грузишь react-dom с CDN
08:02:41 ДП
User 61416070
и смотришь сколько реально весит
08:02:47 ДП
User 335034656
у меня сборка просто
08:03:08 ДП
User 335034656
где вы взяли то?
08:03:15 ДП
User 335034656
я тупро просто поставил и все
08:03:20 ДП
User 335034656
больше ничего не делал
08:03:44 ДП
User 61416070
https://cdnjs.com/libraries/react-dom
cdnjs.com/libraries/react-dom
react-dom - The entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React, which is shipped as react to npm. - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
08:06:46 ДП
User 335034656
User 61416070
https://cdnjs.com/libraries/react-dom
cdnjs.com/libraries/react-dom
react-dom - The entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React, which is shipped as react to npm. - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
зачем мне это?
08:06:54 ДП
User 335034656
я говорю сдалал npm i и все
08:09:12 ДП
User 67164223
User 41482050
Нужна помощь. сть библиотека, которая импортится самым обычным es6 импортом. Внутри у нее есть строчки, которые по сути добавляют глобальную переменную:
if (!window.dhtmlxValidation) {
        dhtmlxValidation = function(){};
        dhtmlxValidation.prototype = {.....}
        ....
}После сборки бандла, выходит dhtmlxValidation is not defined. Что делать?
define plugin поставить
08:09:36 ДП
User 61416070
ну что тут сказать, если в проекте есть жесткие ограничения на размер js кода, то лучше писать на нативном js :)
08:09:44 ДП
User 61416070
и не использовать второнние библиотеки
08:09:53 ДП
User 67164223
User 335034656
чот реакт-дом не в проде
08:09:59 ДП
User 41482050
User 67164223
define plugin поставить
Спасибо
08:10:23 ДП
User 41482050
User 61416070
ну что тут сказать, если в проекте есть жесткие ограничения на размер js кода, то лучше писать на нативном js :)
А почему бы не использовать gzip?
08:10:30 ДП
User 335034656
User 67164223
чот реакт-дом не в проде
сам файл весит много
08:10:37 ДП
User 335034656
который на выходе
08:10:44 ДП
User 335034656
а в нем - нет нехрена толком
08:11:07 ДП
User 61416070
User 41482050
А почему бы не использовать gzip?
ну я так понял там людей беспокоит именно размер js при парсинге в браузере
08:11:15 ДП
User 61416070
проекты действительно разные бывают
08:11:27 ДП
User 67164223
User 335034656
сам файл весит много
у тебя вся либа тянется
08:11:33 ДП
User 67164223
когда запускаешь прод режим
08:11:33 ДП
User 61416070
на мобилах каждый мегабайт js парсится не быстро
08:11:37 ДП
User 67164223
то там меньше намного
08:11:58 ДП
User 335034656
о том и говорю
08:12:04 ДП
User 335034656
что это не устраивает
08:12:24 ДП
User 335034656
придется на любимом jq писать
08:13:08 ДП
User 134905826
User 335034656
придется на любимом jq писать
ну и выбор, например vue.js размером сравним с jquery
08:13:44 ДП
User 335034656
User 134905826
ну и выбор, например vue.js размером сравним с jquery
поддержка браузеров не устраивает
08:14:14 ДП
User 134905826
User 335034656
поддержка браузеров не устраивает
jquery 3 тоже только для modern browsers
08:14:36 ДП
User 335034656
для modern
08:14:44 ДП
User 335034656
нам нужны и более старые
08:15:09 ДП
User 212795634
User 335034656
reactDOM дохера занимает
они вместе 100 кб занимают без гзипа
08:15:34 ДП
User 335034656
User 212795634
они вместе 100 кб занимают без гзипа
файл, который грузится на устройсво весит почти 600Кб
08:17:01 ДП
User 76662447
User 335034656
анализхатор вряд ли врет
Анализатор врёт
08:17:11 ДП
User 76662447
deal with it
08:17:16 ДП
User 76662447
¯\_(ツ)_/¯
08:17:31 ДП
User 335034656
User 76662447
Анализатор врёт
не суть, файл весит много.
08:18:01 ДП
User 67164223
User 335034656
не суть, файл весит много.
можно как-то форкнуть?
08:18:20 ДП
User 335034656
зачем?
08:18:23 ДП
User 335034656
там нет ничего
08:18:29 ДП
User 335034656
кроме библиотек
08:18:36 ДП
User 212795634
User 335034656
файл, который грузится на устройсво весит почти 600Кб
в гзипе или без?
08:18:49 ДП
User 67164223
тогда скинь фул конфиг вебпака
08:19:05 ДП
08:19:25 ДП
User 76662447
User 67164223
можно как-то форкнуть?
Реакт?
08:19:29 ДП
User 76662447
Хорошоо
08:19:31 ДП
User 212795634
конфиг в студию короче, это гадание ни к чему не приведет
08:19:39 ДП
08:20:06 ДП
User 212795634
Завидую твоему умению внимательно читать
08:20:08 ДП
User 67164223
User 335034656
это сразу и прод и дев?
08:20:36 ДП
08:20:41 ДП
08:21:16 ДП
User 67164223
ля дядя, чо за легаси
08:23:17 ДП
User 41482050
User 67164223
define plugin поставить
Это оказалось не тем, что нужно.
Проблема конкретно с этой строчкой в импортируемом js файле.
https://github.com/kalcifer/ember-dhtmlx/blob/master/vendor/dhtmlx/sources/dhtmlxCommon/codebase/dhtmlxcommon.js#L955
github.com/kalcifer/ember-dhtmlx/blob/master/vendor/dhtmlx/sources/dhtmlxCommon/codebase/dhtmlxcommon.js
ember-dhtmlx - Ember addon to use tree component library dhtmlx
08:23:40 ДП
User 304993607
есть какая статейка, как не поломать мозги с роутером v4?
08:31:23 ДП
User 242329862
User 304993607
есть какая статейка, как не поломать мозги с роутером v4?
практика-практика-практика
08:33:34 ДП
User 304993607
User 242329862
практика-практика-практика
да тут магия, урл редиректит верно, но компоненты не рисует, ток полсе перезагрузки
08:34:10 ДП
User 242329862
User 304993607
да тут магия, урл редиректит верно, но компоненты не рисует, ток полсе перезагрузки
pureComponent или redux используешь?
08:34:18 ДП
User 304993607
User 242329862
pureComponent или redux используешь?
redux
08:34:33 ДП
User 242329862
User 304993607
redux
гоу в чат для реакта
10:27:28 ДП
User 335034656
вычислил почему столько веса
10:27:35 ДП
User 335034656
он в файлы соурсмапы долбит
10:27:50 ДП
User 335034656
есть какая-то возможность выбросить соурсмапы из файла?
10:27:54 ДП
User 335034656
гугл чот не помог
10:31:57 ДП
User 67164223
User 335034656
есть какая-то возможность выбросить соурсмапы из файла?
вытащить девтул
10:32:06 ДП
User 67164223
и добавлять только для дев режима
10:32:29 ДП
User 335034656
если сейчас закоменчу - соурс исчезнет?
10:32:51 ДП
User 67164223
User 335034656
если сейчас закоменчу - соурс исчезнет?
должен
10:33:11 ДП
User 335034656
спс понял
03:22:19 ПП
User 567205898
здравствуйте, у меня почему то не создается bundle.js в чем могут быть причины? ошибок нет
04:00:08 ПП
User 269185833
Кинь код
04:24:35 ПП
User 567205898
User 269185833
Кинь код
webpack.config
module.exports = {
    entry: "./app/app.jsx", // входная точка - исходный файл
    output:{
        path: "public",     // путь к каталогу выходных файлов - папка public
        filename: "bundle.js"       // название создаваемого файла
    },
    resolve:{
        extensions: ["", ".js", ".jsx"] // расширения для загрузки модулей
    },
    module:{
        loaders:[   //загрузчики
            {
                test: /\.jsx?$/, // определяем тип файлов
                exclude: /(node_modules)/,
                loader: ["babel-loader"],
                query:{
                    presets:["es2015", "react"]
                }
            }
        ]
    }
}
04:25:25 ПП
User 567205898
User 269185833
Кинь код
package.json
{
  "name": "test-work",
  "version": "0.1.4",
  "description": "",
  "author": "gibkin",
  "license": "",
  "scripts": {
    "start": "webpack-dev-server —progress",
    "build": "NODE_ENV=production node_modules/.bin/webpack -p —progress —colors"
  },
  "devDependencies": {
    "babel-core": "~6.7.*",
    "babel-loader": "~6.2.*",
    "babel-preset-es2015": "~6.6.*",
    "babel-preset-react": "~6.5.*",
    "webpack": "~1.12.*",
    "webpack-dev-server": "~1.14.*"
  },
  "dependencies": {
    "antd": "^2.13.2",
    "react": "^15.0.0",
    "react-bootstrap": "^0.31.3",
    "react-dom": "^15.0.0"
  }
}
05:22:41 ПП
User 122087672
User 567205898
webpack.config
module.exports = {
    entry: "./app/app.jsx", // входная точка - исходный файл
    output:{
        path: "public",     // путь к каталогу выходных файлов - папка public
        filename: "bundle.js"       // название создаваемого файла
    },
    resolve:{
        extensions: ["", ".js", ".jsx"] // расширения для загрузки модулей
    },
    module:{
        loaders:[   //загрузчики
            {
                test: /\.jsx?$/, // определяем тип файлов
                exclude: /(node_modules)/,
                loader: ["babel-loader"],
                query:{
                    presets:["es2015", "react"]
                }
            }
        ]
    }
}
что внутри ./app/app.jsx ?
05:23:39 ПП
User 212795634
const a = 2 // присваиваем константе а значение 2
05:24:12 ПП
User 567205898
User 122087672
что внутри ./app/app.jsx ?
var ReactDOM = require('react-dom');
var React = require('react');
var WeatherBox = require('./components/WeatherBox');

ReactDOM.render(
    <WeatherBox url="http://localhost:8182/city/"/>,
    document.getElementById("cityContainer")
)
05:25:31 ПП
User 122087672
хз вроде все правильно
05:27:23 ПП
User 567205898
User 122087672
хз вроде все правильно
вот структура проекта
05:28:18 ПП
User 567205898
в директории static прописываю npm install, потом захожу в папку node_modules/.bin и запускаю webpack
05:28:46 ПП
User 567205898
и как видно папка public пустая
05:29:29 ПП
User 1272439
как запускаешь?
05:29:53 ПП
User 567205898
User 1272439
как запускаешь?
в директории static npm start
05:30:16 ПП
User 567205898
пробывал и в директории app запускать безрезультатно
05:30:33 ПП
User 1272439
./node_modules/.bin/webpack --config webpack.config.js
05:35:57 ПП
User 567205898
User 1272439
./node_modules/.bin/webpack --config webpack.config.js
Error: Cannot find module 'C:\Users\User\I323\TestWeather\src\main\resources\static\node_modules\.bin\webpack.config.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at module.exports (C:\Users\User\I323\TestWeather\src\main\resources\static\node_modules\webpack\bin\convert-argv.js:80:13)
    at Object.<anonymous> (C:\Users\User\I323\TestWeather\src\main\resources\static\node_modules\webpack\bin\webpack.js:39:40)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
05:36:29 ПП
User 1272439
из static запускаешь?
05:36:42 ПП
User 1272439
надо из static
05:36:50 ПП
User 567205898
аа блин
05:36:58 ПП
User 567205898
а как запустить из статик?
05:37:10 ПП
User 1272439
я ж прислал команду
05:37:10 ПП
User 567205898
раньше я через точку запускал
05:37:47 ПП
User 567205898
User 1272439
я ж прислал команду
в винде вот такая дичь: "." не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.
05:38:30 ПП
User 567205898
User 1272439
я ж прислал команду
в убунте работала
05:38:31 ПП
User 1272439
ох. винда. короче напиши в package.json такое:
05:38:55 ПП
User 1272439
"build": "NODE_ENV=production node_modules/.bin/webpack -p —progress —colors --config webpack.config.js"
05:39:01 ПП
User 1272439
в общем. укажи путь к конфигу
05:39:08 ПП
User 1272439
и потом npm run build
05:41:06 ПП
User 567205898
User 1272439
и потом npm run build
NODE_ENV=production node_modules/.bin/webpack -p —progress —colors —config webpack.config.js

"NODE_ENV" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-work@0.1.4 build: NODE_ENV=production node_modules/.bin/webpack -p —progress —colors --config webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-work@0.1.4 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2018-04-16T17_40_40_660Z-debug.log
05:41:32 ПП
User 567205898
до этого вот что стояло: NODE_ENV=production node_modules/.bin/webpack -p
05:41:49 ПП
05:42:03 ПП
User 1272439
в винде вроде баш можно поставить
05:42:12 ПП
User 1272439
с гитом в комплекте что-то такое идет
05:42:25 ПП
User 1272439
попробуй убрать  NODE_ENV=production
05:42:28 ПП
User 567205898
винда геморой
05:43:06 ПП
User 1272439
"build": "webpack -p --progress --colors --config webpack.config.js"
05:44:47 ПП
User 567205898
User 1272439
"build": "webpack -p --progress --colors --config webpack.config.js"
ох заработало
05:44:56 ПП
User 567205898
User 1272439
"build": "webpack -p --progress --colors --config webpack.config.js"
огромное спасибо!!!
05:45:20 ПП
User 1272439
поставь гит и пользуй git bash
05:45:33 ПП
User 212795634
User 1272439
поставь гит и пользуй git bash
Wsl лучше
05:45:44 ПП
User 212795634
Или вообще винду снести
05:45:51 ПП
User 112715267
User 212795634
Wsl лучше
омг
05:46:01 ПП
User 1272439
наверное. в общем, что угодно, но не то что там винде есть
05:46:13 ПП
User 567205898
User 1272439
поставь гит и пользуй git bash
ERROR in multi main
Module not found: Error: Cannot resolve module '—progress' in C:\Users\User\I323\TestWeather\src\main\resources\static
 @ multi main

ERROR in multi main
Module not found: Error: Cannot resolve module '—colors' in C:\Users\User\I323\TestWeather\src\main\resources\static
 @ multi main
правда вот такие ошибки
05:46:34 ПП
User 1272439
длинное тире на два минуса поменяй
05:51:43 ПП
User 567205898
User 1272439
длинное тире на два минуса поменяй
спасибо!!!