Небольшие поправки на сегодняшний день. Так как технологии меняются очень быстро :) 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'.
Мне сложно подобрать слова, чтоб передать насколько этот вебинар помог мне в моих первых шагах в webpack! Семинар просто супер! Подписываюсь на канал 100%
Спасибо, Дмитрий. Вы очень здорово рассказываете.. Вы умеете подать материал так чтобы понимали просто все!!! Без перегрузов)) Максимум усвоенной информации.
Спасибо за вебинар, отличное видео. Очень помогло въехать и также понравился подход, когда специально делаете ошибки и на ходу их правите. Действительно лучше помогает понять, что к чему! И как раз ответили на все мои вопросы, как новичка в вебпак
Дима, спасибо. Долго вебпак отодвигал назавтра. Сегодня наконец выбрал время. Как всегда материал на высоте. Осталось со смартгридом его подружить и поэкспериментировать
Спасибо, Дим. Проходил у тебя курс по Вью. Спрашивал у тебя где посмотреть про вебпак, вот только добрался до этого видоса. Теперь все намного понятней. Благодарю!
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, Наверное еще курсы возьму..реально хоть объяснять умеете на пальцах... что зачем.
В вебинаре была ошибка в плагине: extract-text-webpack-plugin при указаний правил, опция fallback - это не откат действия, а это запасной план на случай если плагин не отработает.
Не могу понять, почему в видео webpack-dev-server работает без папки dist? У меня это повторить не получается. Выдает ошибку на отстутствующий файл main.js.
Может как-нибудь по node.js проведешь? Было бы очень полезно, т.к. смотрю много каналов, но информацию от тебя лучше всего воспринимаю, да и по node.js очень мало актуальной русскоязычной информации
В документации уже иначе пишут: npm install --save-dev @babel/core @babel/cli @babel/preset-env Просто уже версии другие вышли, и если установить как показывает Дмитрий, то работать Babel не будет.
Если у нас скрипт со стилями внизу перед закрывающим тегом body, то у нас будет моргание стилей когда интепритатор дойдет до скрипта, так как dom уже будет, а стилей нет. Вот если у нас в хеде изначально будет стоят критикал css то тогда да, такой подход неплох
Скажите пожалуйста, можно ли средствами 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
в 2020 году возникают ошибки при установке трех компонентов bable. Всё начинает работать при установке "babel-core": "^ 6.26.0" "babel-loader": "^ 7.1.4" "babel-preset-env": "^ 1.6.1"
Кстати, не мог в консоли Атома локально устанавливать , долго не мог понять, что происходит, а в командной строке все норм работает. Может, кому-нибуд пригодится
Дмитрий, великолепный урок. Все посматривал на веб-пак, но ни как руки не доходили. А подскажите, пожалуйста, в итоговом файле при объединении файлов остаются комментарии (если добавляем стороннюю либу), так вот, можно ли их убрать через веб-пак, или они удаляются? Тут не очень понял. И еще, можно ли в файлы JS/CSS через веб-пак добавлять свои комментарии в начале файла? И немного не в тему, наверное, как лучше версионность вести для файлов? Например: app-v1.0.1.js или app.js?v=1.0.0 Спасибо за прекрасный урок, пошел пробовать переписывать проект через веб-пак и смотреть доки по нему, теперь с другим пониманием! СПАСИБО!
на webpack 4 у кого не открывает компонент в mode: 'history'. пропишете historyApiFallback: true в webpack.config.js devServer: { historyApiFallback: true } тут указано webpack.js.org/configuration/
Поясните пожалуйста, настраивал все практически 1в1 как у Дмитрия, но изменения в реалтайме и в принципе JS код не работает, хотя в main.js попадают. Буду очень признателен за помощь.
Дмитрий, когда новый марафон по php? На сайте школы смотрел, написано что стартует с 02.04.18, а захожу почитать поподробнее про марафон, а там уже написано что что он только стартует через 23 дня. Не очень хочется пропустить его)
а вот скрестить sass + pug + vue из однофайловых компонентов никак не получается =( sass почему-то пытается обработать участок кода, предназначенный для pug в старом webpack такого не было
