Мне сложно подобрать слова, чтоб передать насколько этот вебинар помог мне в моих первых шагах в webpack! Семинар просто супер! Подписываюсь на канал 100%
Спасибо, Дмитрий. Вы очень здорово рассказываете.. Вы умеете подать материал так чтобы понимали просто все!!! Без перегрузов)) Максимум усвоенной информации.
Небольшие поправки на сегодняшний день. Так как технологии меняются очень быстро :) 1. Если у кого-то не заработал web-dev-server в режиме отслеживания, укажите порт в команде запуска, например '--port 6789'; 2. Устанавливаем '@babel/core' и '@babel/preset-env' вместо 'babel-core' и 'babel-preset-env'. 'babel-preset-stage-3' - не устанавливаем и не указываем в .babelrc, так как он переехал в preset-env. В '.babelrc' пресет нужно указать так: "@babel/env"; 3. Вместо 'extract-text-webpack-plagin' нужно использовать 'mini-css-extract-plugin'.
Спасибо за вебинар, отличное видео. Очень помогло въехать и также понравился подход, когда специально делаете ошибки и на ходу их правите. Действительно лучше помогает понять, что к чему! И как раз ответили на все мои вопросы, как новичка в вебпак
Дима, спасибо. Долго вебпак отодвигал назавтра. Сегодня наконец выбрал время. Как всегда материал на высоте. Осталось со смартгридом его подружить и поэкспериментировать
Спасибо, Дим. Проходил у тебя курс по Вью. Спрашивал у тебя где посмотреть про вебпак, вот только добрался до этого видоса. Теперь все намного понятней. Благодарю!
00:02:50 содержание семинара 00:08:42 установка Node.js 00:11:00 переход в диреторию сборки и инициализация npm. npm init 00:11:30 установка webpack. npm i webpack --save-dev 00:12:45 отличия от gulp 00:15:50 установка webpack-cli. npm i webpack-cli --save-dev 00:22:30 немного про точку входа 00:24:30 подключение собственных модулей. 00:27:40 подключение сторонней библиотеки 00:31:35 как скачать более старую версию любого устанавливаемого модуля @1.2.3 00:33:00 немного о разнице с Gulp 00:34:00 установка в запуске флага --mode production или --mode development 00:35:30 как скрестить gulp и webpack 00:36:15 установка webpack dev-server. npm i webpack-dev-server (--open) 00:40:00 создание конфига webpack.config.js 00:44:13 установка пути для файла сборки при webpack-dev-server 00:48:00 publicPath для работы в dev-server 00:58:30 установка Bable 00:59:30 добавляем файл .babelrc 01:07:00 оптимизация JS кратко 01:07:30 преимущество webpack перед gulp 01:08:30 добавление отладочной функции 01:10:15 поле devtool: "eval-sourcemap" 01:11:45 как добавить eval-surcemap, что бы он не засорял исходный файл для mode production 01:20:44 подключаем CSS внутрь файла js 01:26:45 разделяем css и js отдельно 01:30:00 extract-text-webpak-plugin@next 01:38:15 как создать подпапку в dist 01:40:00 как webpack можно копировать статические файлы. Ёрел
Вспомнился старый анекдот. Студентам выдают: моток провода, двое пассатижей, канистру с керосином, пять алюминиевых листов. Теперь мы это "бррр!" - и ваша задача построить ракету-носитель "Протон".
Для тех, кто не может писать новые команды в консоли, после запуска сервера "npm run dev" - останавливайте процесс с помощью CTRL+C в консоли. Дмитрий забыл про это упомянуть Если возникнет ошибка, то 1. Переименовать папку, чтобы она не называлась так же, как и модули, то есть webpack или postcss 2. Очистить кеш npm cache clean --force
не очень понял. так что придутся постоянно запускать "npm run dev", чтобы обновлялся код, который уже написал? автоматом в браузере не увидишь, что сделал?
просто нужно запускать в фоне. например screen -S server npm run dev где server - название для фонового экземляра консоли чтобы потом к нему вернуться: screen -r server чтобы уйти из текущего экземпляра консоли в основной ctrl + A затем d Посмотреть список запущенных экземпляров screen -ls Чтобы посмотреть что еще можно сделать с экземпляром консоли ctrl + A затем ?
Babel обновился. У кого с Babel`ом траблы вот строка для скачивания: npm install -D babel-loader @babel/core @babel/preset-env webpack файлик .babelrc убираем. и вот код для подключения: rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] вроде заработала система. сложно поначалу, но когда саму философию вкуривать начинаешь, местами даже интересно становится ))
Дмитрий спасибо что в делаете это, это реально нормальное объяснение, брал у вас курсы и прошло 2 года теперь работаю, но вроде как учился больше на бек, но по факту приходиться учиться сейчас на фронт, да еще и ангулярjs, Наверное еще курсы возьму..реально хоть объяснять умеете на пальцах... что зачем.
Может как-нибудь по node.js проведешь? Было бы очень полезно, т.к. смотрю много каналов, но информацию от тебя лучше всего воспринимаю, да и по node.js очень мало актуальной русскоязычной информации
на webpack 4 у кого не открывает компонент в mode: 'history'. пропишете historyApiFallback: true в webpack.config.js devServer: { historyApiFallback: true } тут указано webpack.js.org/configuration/
В вебинаре была ошибка в плагине: extract-text-webpack-plugin при указаний правил, опция fallback - это не откат действия, а это запасной план на случай если плагин не отработает.
Если у нас скрипт со стилями внизу перед закрывающим тегом body, то у нас будет моргание стилей когда интепритатор дойдет до скрипта, так как dom уже будет, а стилей нет. Вот если у нас в хеде изначально будет стоят критикал css то тогда да, такой подход неплох
Дмитрий, великолепный урок. Все посматривал на веб-пак, но ни как руки не доходили. А подскажите, пожалуйста, в итоговом файле при объединении файлов остаются комментарии (если добавляем стороннюю либу), так вот, можно ли их убрать через веб-пак, или они удаляются? Тут не очень понял. И еще, можно ли в файлы JS/CSS через веб-пак добавлять свои комментарии в начале файла? И немного не в тему, наверное, как лучше версионность вести для файлов? Например: app-v1.0.1.js или app.js?v=1.0.0 Спасибо за прекрасный урок, пошел пробовать переписывать проект через веб-пак и смотреть доки по нему, теперь с другим пониманием! СПАСИБО!
Кстати, не мог в консоли Атома локально устанавливать , долго не мог понять, что происходит, а в командной строке все норм работает. Может, кому-нибуд пригодится
Значит встала задача настроить webpack для верстальщика. gulp почти получилось уже, но я ж такой нафиг gulp если есть webpack. Основные фишки которые нужны, это обработка scss, выгрузка по ftp, и возможность подключения темплетов. Например чтобы можно было в index.html подключить footer.html и header.html. И тут я обломал зубы, оказывается webpack-dev-server умеет следить только за index.js файлом и делать live reload. Точнее он может следить за src или dist директорией, но он не понимает что если в index.html я подключаю @include('some_template.html', {params}), то нужно на лету обработать это изменение с помощью плагина и залить в dist. Точнее можно настроить чтобы он видел изменения, надо потанцевать с бубнами и подключить index.html в index.js, но что если мне нужен не один файл а любой файл .html. И вот тут балалайка. Можно конечно темплетную систему подключить какую то или попросить верстальщика подключать все .html файлы в index.js но это во первых не удобно, а во вторых сильно сложно для верстальщика. А вот gulp с этой задачей легко справляется - ему достаточно указать задачу следить за .html и с помощью browsersync их заливать в dist. В общем webpack больше для js разработчиков предназначен.
Не могу понять, почему в видео webpack-dev-server работает без папки dist? У меня это повторить не получается. Выдает ошибку на отстутствующий файл main.js.
Как и было предложено, выкладываю вопрос, на который не успели ответить в рамках вебинара, в комментариях к видео: Обратил внимание, что при выстраивании цепочки style-loader, css-loader, postcss-loader файлы стилей 2 раза прогоняется через autoprefixer (css-loader и postcss-loader). Частично css-loader использует те же зависимости, что и postcss-loader, но старые версии (например postcss 3-летней давности). Postcss-loader использует актуальные зависимости, но при этом у него зависимостей сильно меньше - видимо css-loader делает еще какие-то полезные преобразования. Узнал, что есть возможность postcss-loader использовать без css-loader. Очевидно, что это даст прирост производительности. Но есть сомнения, что качество обработки файлов стилей ухудшится. Целесообразно ли использовать для css-файлов только postcss-loader без css-loader?
На сегодняшний день при установке 3х пакетов "babel-core" "babel-loader" "babel-preset-env" Выдает ошибку при сборке. E:\Front End Education\webpack-first>npm run build > webpack-first@1.0.0 build E:\Front End Education\webpack-first > webpack --mode production Hash: 3bb22fbd324ea27c19e3 Version: webpack 4.41.0 Time: 1036ms Built at: 2019-10-10 3:39:30 PM 1 asset Entrypoint main = main.js [0] ./src/index.js 2.95 KiB {0} [not cacheable] [built] [failed] [1 error] ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core' ), you should install 'babel-loader@7'. at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:690:17) at require (E:\Front End Education\webpack-first ode_modules\v8-compile-cache\v8-compile-cache.js:161:2 0) at Object. (E:\Front End Education\webpack-first ode_modules\babel-loader\lib\index.js:10:11 ) at Module._compile (E:\Front End Education\webpack-first ode_modules\v8-compile-cache\v8-compile-cache. js:192:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:690:17) at require (E:\Front End Education\webpack-first ode_modules\v8-compile-cache\v8-compile-cache.js:161:2 0) at loadLoader (E:\Front End Education\webpack-first ode_modules\loader-runner\lib\loadLoader.js:18:17) at iteratePitchingLoaders (E:\Front End Education\webpack-first ode_modules\loader-runner\lib\LoaderRun ner.js:169:2) at runLoaders (E:\Front End Education\webpack-first ode_modules\loader-runner\lib\LoaderRunner.js:365:2 ) at NormalModule.doBuild (E:\Front End Education\webpack-first ode_modules\webpack\lib\NormalModule.js:2 95:3) at NormalModule.build (E:\Front End Education\webpack-first ode_modules\webpack\lib\NormalModule.js:446 :15) at Compilation.buildModule (E:\Front End Education\webpack-first ode_modules\webpack\lib\Compilation.js :739:10) at moduleFactory.create (E:\Front End Education\webpack-first ode_modules\webpack\lib\Compilation.js:11 11:12) at factory (E:\Front End Education\webpack-first ode_modules\webpack\lib\NormalModuleFactory.js:409:6) at hooks.afterResolve.callAsync (E:\Front End Education\webpack-first ode_modules\webpack\lib\NormalMod uleFactory.js:155:13) at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (E:\Front End Education\webpack-first o de_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1) at AsyncSeriesWaterfallHook.lazyCompileHook (E:\Front End Education\webpack-first ode_modules\tapable\l ib\Hook.js:154:20) at resolver (E:\Front End Education\webpack-first ode_modules\webpack\lib\NormalModuleFactory.js:138:29 ) at process.nextTick (E:\Front End Education\webpack-first ode_modules\webpack\lib\NormalModuleFactory.j s:346:9) at process._tickCallback (internal/process/next_tick.js:61:11) npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! webpack-first@1.0.0 build: `webpack --mode production` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the webpack-first@1.0.0 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\АГ\AppData\Roaming pm-cache\_logs\2019-10-10T12_39_30_243Z-debug.log E:\Front End Education\webpack-first>npm run build Пришлось установить более старые версии этих пакетов: "babel-core": "^ 6.26.0" "babel-loader": "^ 7.1.4" "babel-preset-env": "^ 1.6.1" Получается что частично видео уже не актуально или как настроить под новые версии??
У меня ошибки в командной строке вылазили, когда начал с Babel работать. полез в документацию, вместо babel-core, babel-preset-env устанавливал @babel-core, @babel/present-env. В общем, вот здесь смотрел babeljs.io/setup#via-config
@@andrewmarkhai3979 серьёзно?! Неожиданно даже) Ну ничё. Вообще с доками работать полезнее. Но ё-маё. Это непросто. Например сейчас колупаю ютуб-апи. Жаль что нет такого вот лавриковского разбора ютуб-апишки(.
В документации уже иначе пишут: npm install --save-dev @babel/core @babel/cli @babel/preset-env Просто уже версии другие вышли, и если установить как показывает Дмитрий, то работать Babel не будет.
Дмитрий, когда новый марафон по php? На сайте школы смотрел, написано что стартует с 02.04.18, а захожу почитать поподробнее про марафон, а там уже написано что что он только стартует через 23 дня. Не очень хочется пропустить его)
в 2020 году возникают ошибки при установке трех компонентов bable. Всё начинает работать при установке "babel-core": "^ 6.26.0" "babel-loader": "^ 7.1.4" "babel-preset-env": "^ 1.6.1"
Почему на 26:26 в пути к скрипту указано "dist/main.js", хотя нужно подниматься на каталог выше, и в данном случае нужно "../dist/main.js" ? Сделал так - работает. Сделал как в видео - ошибка, что не удалось найти файл main.js
Скажите пожалуйста, можно ли средствами Webpack собирать группы произвольных *.js файлов в единые *.js файлы? Имеем: public.src/modules/common/md5.js public.src/modules/common/sha/sha1.js public.src/modules/common/sha/sha2.js public.src/modules/user/rights.js public.src/modules/user/friends.js Нужно получить: public/modules/common/index.js
Лучшее введение в webpack, что я смог найти
Мне сложно подобрать слова, чтоб передать насколько этот вебинар помог мне в моих первых шагах в webpack! Семинар просто супер! Подписываюсь на канал 100%
Супер! Дмитрий - преподаватель от Бога! Все настолько доступно и понятно объясняет, что даже бы ребенок понял! Класс! Спасибо за отличный урок!
Отличное видео для знакомства с Webpack. Мне очень помогло, спасибо!
Спасибо, Дмитрий. Вы очень здорово рассказываете.. Вы умеете подать материал так чтобы понимали просто все!!! Без перегрузов)) Максимум усвоенной информации.
- как можно скрестить webpack и gulp?
- положить их вместе в одну папку и больше никого в этой папке не оставить
Отличный вебинар, спасибо Димас
это единственное видео, благодаря которому я разобралась с webpack. Спасибо!
Небольшие поправки на сегодняшний день. Так как технологии меняются очень быстро :)
1. Если у кого-то не заработал web-dev-server в режиме отслеживания, укажите порт в команде запуска, например '--port 6789';
2. Устанавливаем '@babel/core' и '@babel/preset-env' вместо 'babel-core' и 'babel-preset-env'. 'babel-preset-stage-3' - не устанавливаем и не указываем в .babelrc, так как он переехал в preset-env. В '.babelrc' пресет нужно указать так: "@babel/env";
3. Вместо 'extract-text-webpack-plagin' нужно использовать 'mini-css-extract-plugin'.
Благодарю! очень помогло!
Если вы имеете ввиду сделать так: "dev": "webpack-dev-server --mode development --open --port 6789", то не помогло...
Спасибо за комментарий, очень помог)
@@user-wc9kq3mi4o у меня такая же проблема(
Спасибо за вебинар, отличное видео. Очень помогло въехать и также понравился подход, когда специально делаете ошибки и на ходу их правите. Действительно лучше помогает понять, что к чему! И как раз ответили на все мои вопросы, как новичка в вебпак
Дмитрий, спасибо за вебинар! Очень полезно и доступно :)
Дмитрий, спасибо большое, очень приятно было Вас слушать!
Долго искал годное видео именно по 4 вебпаку. Огромное спасибо все четко разжёвано . Респект!
Большое спасибо за видео.
Лайк и подписка.
Лучшее русскоязычное видео на эту тему
Автор спасибо. Хорошо преподносишь материал, без нудятины и лишнего(моё имхо). Большое спасибо
Дима, спасибо. Долго вебпак отодвигал назавтра. Сегодня наконец выбрал время. Как всегда материал на высоте. Осталось со смартгридом его подружить и поэкспериментировать
Дима, читаешь мои мысли! Только решил поискать на просторах youtube про 4й webpack, а тут сразу от тебя ролик :-))
Спасибо, Дим. Проходил у тебя курс по Вью. Спрашивал у тебя где посмотреть про вебпак, вот только добрался до этого видоса. Теперь все намного понятней. Благодарю!
Дмитрий лучший в объяснении веб технологий!
Привет из Стамбула. Очень полезный вебинар спасибо =)
Спасибо - полезный вебинар. И вообще круто рассказываешь - все очень понятно, как для людей делаешь)) Если бы ты вел какие то курсы - я б купил)
Спасибо чел, по webpack мало инфы на ру площадках, разъяснил объяснил молоток )
Отличная штука. Хороший вебинар. Спасибо!
Браво, маэстро. Великолепно разъяснил.
Спасибо, видео очень помогло начать погружение в Webpack.
Спасибо! было очень круто , динамично, понятно , супер подача!)
00:02:50 содержание семинара
00:08:42 установка Node.js
00:11:00 переход в диреторию сборки и инициализация npm. npm init
00:11:30 установка webpack. npm i webpack --save-dev
00:12:45 отличия от gulp
00:15:50 установка webpack-cli. npm i webpack-cli --save-dev
00:22:30 немного про точку входа
00:24:30 подключение собственных модулей.
00:27:40 подключение сторонней библиотеки
00:31:35 как скачать более старую версию любого устанавливаемого модуля @1.2.3
00:33:00 немного о разнице с Gulp
00:34:00 установка в запуске флага --mode production или --mode development
00:35:30 как скрестить gulp и webpack
00:36:15 установка webpack dev-server. npm i webpack-dev-server (--open)
00:40:00 создание конфига webpack.config.js
00:44:13 установка пути для файла сборки при webpack-dev-server
00:48:00 publicPath для работы в dev-server
00:58:30 установка Bable
00:59:30 добавляем файл .babelrc
01:07:00 оптимизация JS кратко
01:07:30 преимущество webpack перед gulp
01:08:30 добавление отладочной функции
01:10:15 поле devtool: "eval-sourcemap"
01:11:45 как добавить eval-surcemap, что бы он не засорял исходный файл для mode production
01:20:44 подключаем CSS внутрь файла js
01:26:45 разделяем css и js отдельно
01:30:00 extract-text-webpak-plugin@next
01:38:15 как создать подпапку в dist
01:40:00 как webpack можно копировать статические файлы. Ёрел
Спасибо. Хороший, полезный вебинар.
Дмитрий, спасибо Вам за Ваш труд. ИМХО на Вашем канале очень качественная подача материала. И, что крайне важно, у Вас приятный голос.
Просто и доступно. Наконец таки понял зачем нам вся дичь из вебпаком) Ставлю 5 лайков сразу)
Лучший просто. Дай Бог здоровья
Круто, долго ждал этого урока!
Дмитрий отличный канал, нужные уроки, лайк )
Вспомнился старый анекдот. Студентам выдают: моток провода, двое пассатижей, канистру с керосином, пять алюминиевых листов. Теперь мы это "бррр!" - и ваша задача построить ракету-носитель "Протон".
У автора очень хорошо поставлен голос. Милота!
Спасибо за полезный урок!
Для тех, кто не может писать новые команды в консоли, после запуска сервера "npm run dev" - останавливайте процесс с помощью CTRL+C в консоли. Дмитрий забыл про это упомянуть
Если возникнет ошибка, то
1. Переименовать папку, чтобы она не называлась так же, как и модули, то есть webpack или postcss
2. Очистить кеш
npm cache clean --force
не очень понял. так что придутся постоянно запускать "npm run dev", чтобы обновлялся код, который уже написал? автоматом в браузере не увидишь, что сделал?
просто нужно запускать в фоне. например screen -S server npm run dev
где server - название для фонового экземляра консоли
чтобы потом к нему вернуться: screen -r server
чтобы уйти из текущего экземпляра консоли в основной ctrl + A затем d
Посмотреть список запущенных экземпляров screen -ls
Чтобы посмотреть что еще можно сделать с экземпляром консоли ctrl + A затем ?
Спасибо тебе, добрый человек)
Очень хорошо. Молодец, живенько.
Очень понятно, спасибо большое!!
спасибо большое. очень понятно объясняете
Спасибо, было как всегда интересно)
Крутое видео! То, что искал.
Спасибо за знания!
Отличный вебинар
Хороший материал для новичка.
Сенкс за вебинар!
ты красава, от души за курс )
Спасибо! Очень подробно)
спасибо, вы очень помогли!
Babel обновился. У кого с Babel`ом траблы вот строка для скачивания:
npm install -D babel-loader @babel/core @babel/preset-env webpack
файлик .babelrc убираем.
и вот код для подключения:
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
вроде заработала система.
сложно поначалу, но когда саму философию вкуривать начинаешь, местами даже интересно становится ))
Это комментарий должен быть закреплен. Он спасет тысячи голов от ударов о стол
спасибо за вебинар
Вебинар супер!
Великолепно!
Большое спасибо
Весьма полезно...
Дмитрий спасибо что в делаете это, это реально нормальное объяснение, брал у вас курсы и прошло 2 года теперь работаю, но вроде как учился больше на бек, но по факту приходиться учиться сейчас на фронт, да еще и ангулярjs, Наверное еще курсы возьму..реально хоть объяснять умеете на пальцах... что зачем.
Классный мужик!
Спасибо большое)
Благодарю.
спасибо,очень помогло)
Для понимания хорошо
СПАСИБО!
Спасибо!
Какие люди не благодарные, 1000 раз просмотрели а лайк только 100 поставили
Спасибо
+ спасибо!
Дмитрий спасибо за урок, чтобы в Sublime text3 убрать подсказки при наведение на теги, можете вставить в настройки строчку "show_definitions": false
Очень Интересует React
Вот за это спасибо большое
Лучше, что есть в рунете для входа в Webpack
Чтобы не зажимать Enter при иницилизации package.json, нужно было написать в терминале npm init -y(Тогда все проставиться в файле автоматически)
Дима я люблю тебя
Дмитрий, ну пора уже в 1080 писать видео...
Если при запуске webpack-dev-server попадаете на listing directory, проверьте index.html. Он НЕ должен лежать в папке src.
В вебпаке 4 уже есть встроенный модуль path. Его не нужно устанавливать, а достаточно просто подключить.
Может как-нибудь по node.js проведешь? Было бы очень полезно, т.к. смотрю много каналов, но информацию от тебя лучше всего воспринимаю, да и по node.js очень мало актуальной русскоязычной информации
Не затронута тема нескольких точек входа. По этому у незнающих webpack на курсе думаю сложилось впечатление нафига он нужен кроме одностраничников.
на webpack 4 у кого не открывает компонент в mode: 'history'.
пропишете historyApiFallback: true в webpack.config.js
devServer: {
historyApiFallback: true
}
тут указано webpack.js.org/configuration/
В вебинаре была ошибка в плагине: extract-text-webpack-plugin при указаний правил, опция fallback - это не откат действия, а это запасной план на случай если плагин не отработает.
Если у нас скрипт со стилями внизу перед закрывающим тегом body, то у нас будет моргание стилей когда интепритатор дойдет до скрипта, так как dom уже будет, а стилей нет. Вот если у нас в хеде изначально будет стоят критикал css то тогда да, такой подход неплох
Дмитрий, великолепный урок. Все посматривал на веб-пак, но ни как руки не доходили.
А подскажите, пожалуйста, в итоговом файле при объединении файлов остаются комментарии (если добавляем стороннюю либу), так вот, можно ли их убрать через веб-пак, или они удаляются? Тут не очень понял.
И еще, можно ли в файлы JS/CSS через веб-пак добавлять свои комментарии в начале файла?
И немного не в тему, наверное, как лучше версионность вести для файлов? Например: app-v1.0.1.js или app.js?v=1.0.0
Спасибо за прекрасный урок, пошел пробовать переписывать проект через веб-пак и смотреть доки по нему, теперь с другим пониманием!
СПАСИБО!
Комментарии остаются
push([e.i,"/*Style for .title*/
.title {
\tcolor:red;
}",""])
Кстати, не мог в консоли Атома локально устанавливать , долго не мог понять, что происходит, а в командной строке все норм работает. Может, кому-нибуд пригодится
Значит встала задача настроить webpack для верстальщика. gulp почти получилось уже, но я ж такой нафиг gulp если есть webpack. Основные фишки которые нужны, это обработка scss, выгрузка по ftp, и возможность подключения темплетов. Например чтобы можно было в index.html подключить footer.html и header.html. И тут я обломал зубы, оказывается webpack-dev-server умеет следить только за index.js файлом и делать live reload. Точнее он может следить за src или dist директорией, но он не понимает что если в index.html я подключаю @include('some_template.html', {params}), то нужно на лету обработать это изменение с помощью плагина и залить в dist. Точнее можно настроить чтобы он видел изменения, надо потанцевать с бубнами и подключить index.html в index.js, но что если мне нужен не один файл а любой файл .html. И вот тут балалайка. Можно конечно темплетную систему подключить какую то или попросить верстальщика подключать все .html файлы в index.js но это во первых не удобно, а во вторых сильно сложно для верстальщика. А вот gulp с этой задачей легко справляется - ему достаточно указать задачу следить за .html и с помощью browsersync их заливать в dist. В общем webpack больше для js разработчиков предназначен.
Если у вас babel-core 7 версии и выше, то это работать не будет. Надо подгружать модули @babel/preset-env и в конфиге так же и подключать
надо подключать:
npm i @babel/core @babel/preset-env babel-loader
stage подключать не стоит
@@JV-un7qw Спасибо вам! Возился с этим 20 минут, ничего не понимал, все красное и думал: "все", пока не зашел в коменты)
Возился час, пришлось изучить babel)
Дмитрий немного недоработал, и не про все расказал вот тут человек целую серию снял как настроить Webpack 4
ruclips.net/video/JcKRovPhGo8/видео.html
На здоровье!)
github.com/SoldierCorp/webpack-starter-pug-sass-es6-jquery
Не могу понять, почему в видео webpack-dev-server работает без папки dist? У меня это повторить не получается.
Выдает ошибку на отстутствующий файл main.js.
Как и было предложено, выкладываю вопрос, на который не успели ответить в рамках вебинара, в комментариях к видео:
Обратил внимание, что при выстраивании цепочки style-loader, css-loader, postcss-loader файлы стилей 2 раза прогоняется через autoprefixer (css-loader и postcss-loader).
Частично css-loader использует те же зависимости, что и postcss-loader, но старые версии (например postcss 3-летней давности).
Postcss-loader использует актуальные зависимости, но при этом у него зависимостей сильно меньше - видимо css-loader делает еще какие-то полезные преобразования.
Узнал, что есть возможность postcss-loader использовать без css-loader. Очевидно, что это даст прирост производительности.
Но есть сомнения, что качество обработки файлов стилей ухудшится.
Целесообразно ли использовать для css-файлов только postcss-loader без css-loader?
Думаю, да. На страничке плагина есть пример настройки модулей postcss с помощью postcss.config.js. В принципе, тогда смысл в css-loader пропадает.
Спасибо за видео! Может сделаешь продолжение? например добавим вотчер за html и sass перегонять в css ?
Привет, ты смог подключить?
апну)
На сегодняшний день при установке 3х пакетов
"babel-core"
"babel-loader"
"babel-preset-env"
Выдает ошибку при сборке.
E:\Front End Education\webpack-first>npm run build
> webpack-first@1.0.0 build E:\Front End Education\webpack-first
> webpack --mode production
Hash: 3bb22fbd324ea27c19e3
Version: webpack 4.41.0
Time: 1036ms
Built at: 2019-10-10 3:39:30 PM
1 asset
Entrypoint main = main.js
[0] ./src/index.js 2.95 KiB {0} [not cacheable] [built] [failed] [1 error]
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'
), you should install 'babel-loader@7'.
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (E:\Front End Education\webpack-first
ode_modules\v8-compile-cache\v8-compile-cache.js:161:2
0)
at Object. (E:\Front End Education\webpack-first
ode_modules\babel-loader\lib\index.js:10:11
)
at Module._compile (E:\Front End Education\webpack-first
ode_modules\v8-compile-cache\v8-compile-cache.
js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (E:\Front End Education\webpack-first
ode_modules\v8-compile-cache\v8-compile-cache.js:161:2
0)
at loadLoader (E:\Front End Education\webpack-first
ode_modules\loader-runner\lib\loadLoader.js:18:17)
at iteratePitchingLoaders (E:\Front End Education\webpack-first
ode_modules\loader-runner\lib\LoaderRun
ner.js:169:2)
at runLoaders (E:\Front End Education\webpack-first
ode_modules\loader-runner\lib\LoaderRunner.js:365:2
)
at NormalModule.doBuild (E:\Front End Education\webpack-first
ode_modules\webpack\lib\NormalModule.js:2
95:3)
at NormalModule.build (E:\Front End Education\webpack-first
ode_modules\webpack\lib\NormalModule.js:446
:15)
at Compilation.buildModule (E:\Front End Education\webpack-first
ode_modules\webpack\lib\Compilation.js
:739:10)
at moduleFactory.create (E:\Front End Education\webpack-first
ode_modules\webpack\lib\Compilation.js:11
11:12)
at factory (E:\Front End Education\webpack-first
ode_modules\webpack\lib\NormalModuleFactory.js:409:6)
at hooks.afterResolve.callAsync (E:\Front End Education\webpack-first
ode_modules\webpack\lib\NormalMod
uleFactory.js:155:13)
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (E:\Front End Education\webpack-first
o
de_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesWaterfallHook.lazyCompileHook (E:\Front End Education\webpack-first
ode_modules\tapable\l
ib\Hook.js:154:20)
at resolver (E:\Front End Education\webpack-first
ode_modules\webpack\lib\NormalModuleFactory.js:138:29
)
at process.nextTick (E:\Front End Education\webpack-first
ode_modules\webpack\lib\NormalModuleFactory.j
s:346:9)
at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-first@1.0.0 build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-first@1.0.0 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\АГ\AppData\Roaming
pm-cache\_logs\2019-10-10T12_39_30_243Z-debug.log
E:\Front End Education\webpack-first>npm run build
Пришлось установить более старые версии этих пакетов:
"babel-core": "^ 6.26.0"
"babel-loader": "^ 7.1.4"
"babel-preset-env": "^ 1.6.1"
Получается что частично видео уже не актуально или как настроить под новые версии??
У меня ошибки в командной строке вылазили, когда начал с Babel работать. полез в документацию, вместо babel-core, babel-preset-env устанавливал @babel-core, @babel/present-env. В общем, вот здесь смотрел babeljs.io/setup#via-config
дзякуй, святы чалавек)
@@leandrmiklashevich297 блин, пришлось через гугл переводчик смотреть Ваш ответ:-D
@@andrewmarkhai3979 серьёзно?! Неожиданно даже) Ну ничё. Вообще с доками работать полезнее. Но ё-маё. Это непросто.
Например сейчас колупаю ютуб-апи. Жаль что нет такого вот лавриковского разбора ютуб-апишки(.
Продублируйте линк на курс по JS нового, который в вебинаре упомянут. Спасибо.
В документации уже иначе пишут: npm install --save-dev @babel/core @babel/cli @babel/preset-env
Просто уже версии другие вышли, и если установить как показывает Дмитрий, то работать Babel не будет.
Дмитрий, когда новый марафон по php? На сайте школы смотрел, написано что стартует с 02.04.18, а захожу почитать поподробнее про марафон, а там уже написано что что он только стартует через 23 дня. Не очень хочется пропустить его)
в 2020 году возникают ошибки при установке трех компонентов bable. Всё начинает работать при установке "babel-core": "^ 6.26.0"
"babel-loader": "^ 7.1.4"
"babel-preset-env": "^ 1.6.1"
Почему на 26:26 в пути к скрипту указано "dist/main.js", хотя нужно подниматься на каталог выше, и в данном случае нужно "../dist/main.js" ? Сделал так - работает. Сделал как в видео - ошибка, что не удалось найти файл main.js
Путь пишется относительно расположения index.html, так что всё правильно на видео. Возможно, при установке npm Вы ошиблись папкой.
Як я вам вдячний за допис!! 3 рази пробував перезапускати проект - і все ніяк, ДЯКУЮ
курс по React!!!
Все конечно круто, но в каких задачах или проектах нужно переходить с галпа на вебпак???
Ни в каких
Скажите пожалуйста, можно ли средствами Webpack собирать группы произвольных *.js файлов в единые *.js файлы?
Имеем:
public.src/modules/common/md5.js
public.src/modules/common/sha/sha1.js
public.src/modules/common/sha/sha2.js
public.src/modules/user/rights.js
public.src/modules/user/friends.js
Нужно получить:
public/modules/common/index.js