В документации webpack 5 сказано, что для очистки папки dist добавили свойство clean: true в output, поэтому можно избавиться от плагина clean-webpack-plugin )
@@maxgraph Очень надо! Не обязательно писать видео, можно просто добавить к этой сборке в гит. И авто-префиксы тоже). Спасибо за твой труд - отличная подача.
Очень полезное видео, автору спасибо! Ребят, вот список того, где будут ошибки относительно 2021.11.26 devServer - нужно вместо contentBase добавить поле объект static: { directory: project_dir} html-loader - нужно добавить еще опцию options: { esModule: false} Так же советую дополнить сборку таким вот образом const json = require('./package.json'); const project_name = json.name; const project_dir = path.resolve(__dirname, project_name); Берем название проекта из package.json, оно меняется при каждом npm init, чистим источники прошлого проекта, и стартовый набор ваших наработок уже подключен к новому проекту.
У меня уже был готовый проект и с галпом все работало, а через вэбпак - пошли проблемы. Дополнил при html-loader в rules options: { esModule: false, sources: false, }, потому что шли ошибки с путями к картинкам.
Начну с того, что текст ниже - это не хейт, а указание на пункты, которые хорошо было бы исправить. Очень хорошо что автор снимает обучающие ролики, но всё же видео должны быть грамотными, чтобы не было недопонимания у зрителей. 1. Зачем в скриптах package.json одновременно и NODE_ENV и mode? Они делают одно и то же. 2. mode должен быть не статичным полем, а динамическим. 3. Не объяснена суть entry, что такое точки входа и как Webpack находит файлы для сборки. Это основа, которую каждый начинающий должен понять, чтобы не возникало ощущение магии. 4. С filename в output дико перемудрил. 5. Почитай что такое publicPath. 6. Модуль path используется для задания абсолютных путей там где Webpack их ожидает. С одной стороны, везде писать path не нужно, с другой стороны на это как бы пофиг, не ошибка. Но объяснить для чего нужен path надо. 7. В одной сборке используешь и html-loader и HtmlWebpackPlugin? Зачем? Они взаимозаменяемы. 8. css-loader преобразует код из CSS в JS, а не наоборот (как было сказано в видео). Здесь суть в том, что Webpack понимает ТОЛЬКО JS и JSON, поэтому css-loader и нужен, для преобразования CSS в JS. 9. MiniCssExtractPlugin замедляет скорость сборки. Он должен использоваться только в продакшене, а в режиме разработки используется style-loader, который внедряет CSS в JS, подключая стили к странице. 10. Зачем в видео разделение css и scss на два лоадера? Если к конфигу уже подключен sass-loader, то это действие лишнее, потому что sass-loader умеет работать как с .css, так и с .scss. 11. В babel-loader есть важная настройка targets. По-умолчанию при ее отсутствии babel конвертирует код до самых допотопных браузеров, увеличивая размер бандла в разы. Если в проекте не нужно поддерживать IE и очень старые версии современных браузеров, то нужно явно указать targets. 12. file-loader уже давно устарел, вместо него используется Asset Modules. Плюс там та же ситуация с непонятной генерацией имени, это все делается намного проще. 13. В HTMLWebpackPlugin по-умолчанию итак заданы то же значение для filename которое ты указал, это свойство здесь лишнее. Оно лишнее еще и потому, что файл с названием index.html итак должен существовать в проекте (в большинстве случаев). 14. В HTMLWebpackPlugin ты выставил свойство minify, сделав только удаление пробелов. Проблема в том, что minify делает гораздо большее, чем только удаляет пробелы, потому что там под капотом стоит Terser. А задавая в перечислении только удаление пробелов - ты отключил все остальные оптимизации плагина. 15. CleanWebpackPlugin тоже уже очень давно не требуется, его функционал включен в output в свойстве clean. 16. contenthash в имени это конечно хорошо, но хотелось бы услышать чем он отличается от hash и chunkhash. В целом хотелось бы слышать больше грамотных объяснений: что за что отвечает, почему это сделано именно так, и так далее.
Спасибо за видео! Жду марафон по вёрстке с данной сборкой настроек Webpack 5. Ну и как в комментариях писали ранее, хотелось бы увидеть видео-урок по созданию многостраничных сайтов Webpack 5.
Вопрос: что если файлы с одним расширением (svg, например) встречаются в 3-х разных папках: img, fonts (иконочный шрифт) и в assets (favicon)? Как их разложить по нужным папкам в build?
Если еще актуально, то помогло { test: /\.html$/i, loader: 'html-loader', options: { esModule: false, } }, в webpack 5 esModule стоит по дефолту true, так что ломает все
наткнулся на такую ошибку, в чем может быть проблема??? З.Ы. остановился на 43 минуте видео ERROR in ./css/style.css Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js): ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'hmr'. These properties are valid: object { publicPath?, esModule?, modules? } at validate (C:\Users\lenovo_v580c\Desktop\webpack_lessons2 ode_modules\schema-utils\dist\validate.js:104:11) at Object.pitch (C:\Users\lenovo_v580c\Desktop\webpack_lessons2 ode_modules\mini-css-extract-plugin\dist\loader.js:39:29)
всем привет, такая ситуация: у index.html я вставил картинку(img src="img") и когда я запускаю webpack, то у в папке dist, в корне у меня появляется картинка у которой не название, а каракули, и если я запущу dev-server(npm run start), то браузер не отображает картинку, так как ссылается на путь той самой картинки с каракулями вместо названия, помогите плз решить проблему. File-loader подключен, картинки из src попадают куда надо, но браузер ссылается именно на это недоразумение в корне dist
Очень узкоспецифичная сборка. Только для простых одностраничников. В реальной жизни, в проекте, больше одного html файла. Более того, часто есть необходимость, выносить повторяющиеся участки в отдельные файлы и подключать их, по мере необходимости.
MAX подскажи как настроить, чтобы собирались несколько страниц .html . Две бессонные ночи) не могу разобраться. Если скопировать код еще раз в webpack.config.js: new HTMLWebpackPlugin({ template: path.resolve(__dirname, 'src/index.html'), filename: 'index.html', minify: { collapseWhitespace: isProd } }), new HTMLWebpackPlugin({ template: path.resolve(__dirname, 'src/test.html'), filename: 'test.html', minify: { collapseWhitespace: isProd } }), то он две страницы собирает, а если страниц будет больше, то проблемка))
у ого на linux и macos не ставиться дополнительное к плагину imagemin-webpack то вот решение: Linux: sudo apt-get install libtool automake autoconf nasm OS X: brew install libtool automake autoconf nasm
все делал по видео, столкнулся с проблемой "html-loader", перекидывает картинки в папку app и подключает пути сам, плагин file-loader просто закидывает изображения в указанную папку но не подключает в html как этого избежать и сделать что бы картинки обрабатывал с подключением путей file-loader,?
у меня в папке dist появляется 2 иконки favicon, одна хешированная (созданная с помощью html webpack plugin), а вторая скопированная copy-webpack-plugin. Есть идеи как это пофиксить? в патернах копи плагина создал globOption а в них ignore, и вставил имя иконки и расширение, но почему то не работает, плагин все равно копирует иконку
У меня тоже такое было, для картинок и шрифтов использовала новую фичу asset, всё работает отлично (в generator указываем папку с нужным названием): { test: /\.(ico|gif|png|jpe?g|svg)$/i, type: 'asset/resource', generator: { filename: 'img/[name][ext]' } }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', generator: { filename: 'fonts/[name][ext]' } }
Отличное видео 👍 Для закрепления надо бы пересмотреть пару раз. Хотелось бы марафон по верстке с данной сборкой, т.к. в основном в вакансиях требуется именно webpack. Спасибо за подробное видео.
Если не работает, возьмите готовое с github, автор же дал ссылку в описании. Просто та что с его репа, она строго настроена под те зависимости, которые в ней использовались, и ошибок не должно быть вообще. А видео, просто как ознакомительное, можно себе в конфиге под видос комменты прописать, для более глубокого понимания.
Хотелось бы поинтересоваться. Возможно, Вам известен какой либо способ организации HTML файлов, в сборке реализованной на Webpack, подобный тому, что применяется в Gulp сборке с помощью плагина gulp-file-include. Проще говоря, речь идет о разделении одного большого HTML фала, на несколько маленьких фрагментов, с целью последующего включения в какой либо другой, общий документ.
всем порвет! возникла проблема.мне передали готовый проект и при запуске через npm выдает ошибку: /Users/a431/Documents/бэкап на айклауд/програмирование/bizfinance/node_modules/.bin/encore: /usr/bin/env: bad interpreter: Operation not permitted кто-то с таким сталкивался? работаю на маке через вс код. заранее спасибо)
Спасибо большое за сборку. Сделал себе все как у тебя. Можно узнать зачем нужны файлы .stylelintrc и .editorconfig? если их удалить ничего не случиться? и еще вопрос на счет автопрефиксера, он тут уже есть по умолчанию или нужно устанавливать?
Не помню про автопрефиксер) надо проверить. насчет тех файлов - первый отвечает за настройка стайллинта (проверяет css-код), второй - за форматирование в редакторе. можно удалить в принципе
Спасибо за разбор! Это моя первая сборка, собранная вручную, до этого верстал дедовскими методами) Все подробно и понятно, а самое главное - все работает) Жду еще видосов по webpack!
Плагины оптимизации для текущей версии WebPack устарели и нестабильно работают, к примеру, у меня не робят, даже image-minimizer-webpack-plugin, на который ссылает imagemin-webpack работает с версией 4. Ждем их обновления
Всем привет, может кто-то подскажет, как настроить webpack, так что бы я смог свой html разбивать на модули, например, так же как работает gulp-file-include
не работает webpack когда я установили это плагин html-webpack-plugin и вот такая ошибка [webpack-cli] Failed to load 'C:\Users\Magomedov\Documents\webpack\webpack-2\webpack.config.js' config [webpack-cli] Error: Cannot find module 'loader-utils' Require stack: ? несколько раз пробовала бесполезный
Если у кого-то сервак не работает, то ставьте версию "webpack-cli": "^3.3.12". Запуск такой - "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"
Импорт переменных из других scss не работает. В видео подобного не нашел, есть решение? Аналогичная ситуация с комментариями. При комментировании кода scss, webpack просто отказывается делать билд.
Спасибо за видео! Подскажите, получилось ли как-то заставить работать svg-спрайты? "svg-sprite-loader" не добавляет в css пути к спрайту (issues/477), а "extract-svg-sprite-webpack-plugin", похоже, вообще не поддерживает webpack 5 т.к. выдает ошибку: "Error: Cannot find module 'webpack/lib/RuleSet'". Возможно, есть еще какие-то варианты?
Спасибо за урок. У меня возникла проблема с sass, консоль говорит, что нету подходящего лоудера, хотя все стоит, и все подключено, и это уже не первый раз возникает сложность в работе webpack and sass. Что может быть и где поискать ответ?
Поддерживаю все положительные коменты ниже, реально класно сделан ролик, понятно, структурированно, а главное на сегодняшний день актуально по webpack 5. Хотел сделать сборку по другим видосам - не смог из-за слабых пока знаний( А тут все четко!!! Благодарен за проделаный труд и потраченное время! Мира и добра Вам!!!
Есть кто использует Webpack 5 в разработке темы для Wordpress? Подскажите пожалуйста толковое видео или текстовый мануал. Это видео отличное - все работает. Автору респект.
У меня не работали импорты в scss, только если из node_modules импортировать все работало. Установил в зависимости "sass" теперь все ок. Максим, почему у тебя все сразу собралось ?
Спасибо, очень годный материал, но я столкнулся с одной проблемой при обработке картинок, у меня создается папка img и там картинка, но почему-то создается еще файл с названием из кучи цифр - 173d746062b437dfebcf.png и в файле index.html тег img ссылается на него, и соотвественно картинка не открывается. Подскажите, пожалуйста, в чем проблема
@@rostislavboyko5098 Я сейчас столкнулся с подобным но только это касалось шрифтов. Решение нашел не использовать ни file-loader ни url-loader, для картинок тоже. Для 5 webpack'a достаточно указать лоадер в таком формате : { test: /\.png/, type: 'asset/resource' generator: { filename: 'static/[hash][ext][query]' } } Немного повозился с именами файлов и теперь все ок.
Здравствуйте, спасибо за сборку, отлично подали, правда я еще начинающий не все понял и поэтому ест один вопрос, когда собирается build и dev, дублируются файлы из папок img fonts и assets(был изменен при сборке было 'app' стало 'app/assets'), подскажите как это исправить.
возможно я и сам несу ерунду но 'app/assets' - означает то что внутри app есть одна папка assets если добавить в эту папку еще одну то app/assets будет просто app
Максим привет, слушай возникает ошибка при запуске Хоста 3000 пишит (node:348) UnhandledPromiseRejectionWarning: ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties я грешу на свою винду старую 7 ка и Service-Pack 1 у меня стоит
Видео отличное, но есть местами дыры в тестах. К примеру если написать для проверки babel асинхронную функцию - то ничего работать не будет. Нужно изменить entry: './js/index.js' на entry: ['@babel/polyfill', './js/index.js'] и установка @babel/polyfill в Dependencies Для тех, кто хочет работать с нативным css (шлифованным postcss) нужны postcss postcss-easy-import postcss-loader autoprefixer csso в DevDependencies В plugins добавить new CssoWebpackPlugin(), и переписать лоадеры вот так { test: /\.css$/i, exclude: /node_modules/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: (resourcePath, context) => path.relative(path.dirname(resourcePath), context) + '/' } }, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ EasyImport, Autoprefixer ] } } } ] } Ещё не досмотрел до самого конца, и впереди ещё кучу функционала которого нужно добавить будет самому. Но тебе большое спасибо за это видео) Пытался вкатиться в вебпак на курсе у Владилена, но там 4 версия и много чего не работает + заточено под проект курса, а мне нужно было собрать универсальный шаблон для вёрстки (решил переобуться с галпа и открыть для себя что-то новое). Сидел бы ждал обновления материала, если бы не ты)
@babel/polyfill вроде уже deprecated, рекомендуют ставить core-js и настраивать пресеты babel под него, в этом случае и в entry кроме index.js ничего добавлять не нужно.
В описании terser-webpack-plugin сказано что в вебпак 5 он уже идет в упаковке и не нуждается в отдельной установке ( you are using webpack v5 or above you do not need to install this plugin), Вы вроде уже 5 версию используете, или я что-то не понял?
43:45 автор сам не понимает что делает, но в этом и вся суть вебпака, какое-то нагромождение команд и конфигураций. В самом начале он говорит что у нас будет одна проблемка, но о ней чуть позже... проблемок будет много и постоянно, поверьте) Импортировать в js файл html и сыы, чтобы он потом автоматически подключался в html файле. Хитро
Извиняюсь за глупый вопрос заранее! Вот представим, что я начинаю новый проект. Создал папку, в нее закинул все конфиги, сделал такую же структуру. Чтобы с этим работать, мне что-либо надо заново прописывать в консоле, что-то подгружать и так далее?) Или же скопировал и все уже будет работать?
Ну, node_modules надо установить, это делается командой npm i, из package.json будут взяты все зависимости для установки. После этого запускать скрипты и работать.
@@adamholo7079 У меня понимает что пишется в scss, только обновлять - только вручную работает. Это значит с прелоадером где-то у меня косяк. Долго просидел, даже уже в режим списывания перешел))) Не могу понять, где в настройках поменять
Не знаю, актуально или нет. Но вот ссылка с документации webpack.js.org/plugins/mini-css-extract-plugin/#common-use-case . Показан правильный вариант использования css, scss лоадеров. У меня заработало.
@@maxgraph Спасибо за ответ!Наверное лучше глобально установить.Больше переживаю чтобы слабый комп.потянул.Node.js установил теперь хочу попробовать установить Webpack и сделать свою первую сборку в жизни.
При установки webpack-dev-сервер появилась ошибка. Может кто знает как починить? помогите пж npm ERR! code ERESOLVE npm ERR! Cannot read property 'length' of undefined
@@zimtos2616 npm крашит... из github issues нашел что то похожее в его старых версиях. Пропробуй ноду (npm c нодой идет) переустановить/обновить на последнюю LTS с офф сайта nodejs.org. Какая версия npm ? (npm -v)
В документации webpack 5 сказано, что для очистки папки dist добавили свойство clean: true в output, поэтому можно избавиться от плагина clean-webpack-plugin )
Ну отлично)
Спасибо
пользуюсь, это круто
Благодарю, возьму на вооружение)
Неплохо бы рассмотреть такой момент, как возможность создания многостраничных сайтов Webpack 5
Не учел это в видео, но если очень надо - сделаю отдельно.
@@maxgraph надо очень. Или уже где-то выложено?
@@miatomusic4158нет еще
@@maxgraph Очень надо! Не обязательно писать видео, можно просто добавить к этой сборке в гит. И авто-префиксы тоже). Спасибо за твой труд - отличная подача.
@@romandogoda2003 присоединяюсь
Очень полезное видео, автору спасибо!
Ребят, вот список того, где будут ошибки относительно 2021.11.26
devServer - нужно вместо contentBase добавить поле объект static: {
directory: project_dir}
html-loader - нужно добавить еще опцию options: {
esModule: false}
Так же советую дополнить сборку таким вот образом
const json = require('./package.json');
const project_name = json.name;
const project_dir = path.resolve(__dirname, project_name);
Берем название проекта из package.json, оно меняется при каждом npm init, чистим источники прошлого проекта, и стартовый набор ваших наработок уже подключен к новому проекту.
Спасибо за твои подсказки, мне помогло решить вопрос с обработкой фото, никак не загружались.
Спасибо за совет! очень выручил!!!
У меня уже был готовый проект и с галпом все работало, а через вэбпак - пошли проблемы. Дополнил при html-loader в rules options: { esModule: false, sources: false, }, потому что шли ошибки с путями к картинкам.
Начну с того, что текст ниже - это не хейт, а указание на пункты, которые хорошо было бы исправить. Очень хорошо что автор снимает обучающие ролики, но всё же видео должны быть грамотными, чтобы не было недопонимания у зрителей.
1. Зачем в скриптах package.json одновременно и NODE_ENV и mode? Они делают одно и то же.
2. mode должен быть не статичным полем, а динамическим.
3. Не объяснена суть entry, что такое точки входа и как Webpack находит файлы для сборки. Это основа, которую каждый начинающий должен понять, чтобы не возникало ощущение магии.
4. С filename в output дико перемудрил.
5. Почитай что такое publicPath.
6. Модуль path используется для задания абсолютных путей там где Webpack их ожидает. С одной стороны, везде писать path не нужно, с другой стороны на это как бы пофиг, не ошибка. Но объяснить для чего нужен path надо.
7. В одной сборке используешь и html-loader и HtmlWebpackPlugin? Зачем? Они взаимозаменяемы.
8. css-loader преобразует код из CSS в JS, а не наоборот (как было сказано в видео). Здесь суть в том, что Webpack понимает ТОЛЬКО JS и JSON, поэтому css-loader и нужен, для преобразования CSS в JS.
9. MiniCssExtractPlugin замедляет скорость сборки. Он должен использоваться только в продакшене, а в режиме разработки используется style-loader, который внедряет CSS в JS, подключая стили к странице.
10. Зачем в видео разделение css и scss на два лоадера? Если к конфигу уже подключен sass-loader, то это действие лишнее, потому что sass-loader умеет работать как с .css, так и с .scss.
11. В babel-loader есть важная настройка targets. По-умолчанию при ее отсутствии babel конвертирует код до самых допотопных браузеров, увеличивая размер бандла в разы. Если в проекте не нужно поддерживать IE и очень старые версии современных браузеров, то нужно явно указать targets.
12. file-loader уже давно устарел, вместо него используется Asset Modules. Плюс там та же ситуация с непонятной генерацией имени, это все делается намного проще.
13. В HTMLWebpackPlugin по-умолчанию итак заданы то же значение для filename которое ты указал, это свойство здесь лишнее. Оно лишнее еще и потому, что файл с названием index.html итак должен существовать в проекте (в большинстве случаев).
14. В HTMLWebpackPlugin ты выставил свойство minify, сделав только удаление пробелов. Проблема в том, что minify делает гораздо большее, чем только удаляет пробелы, потому что там под капотом стоит Terser. А задавая в перечислении только удаление пробелов - ты отключил все остальные оптимизации плагина.
15. CleanWebpackPlugin тоже уже очень давно не требуется, его функционал включен в output в свойстве clean.
16. contenthash в имени это конечно хорошо, но хотелось бы услышать чем он отличается от hash и chunkhash.
В целом хотелось бы слышать больше грамотных объяснений: что за что отвечает, почему это сделано именно так, и так далее.
hmr уже не работает.
Ошибка в DEV SERVER - вместо contentBase нужно static иначе сервак не запуститься
Спасибо за видео! Жду марафон по вёрстке с данной сборкой настроек Webpack 5.
Ну и как в комментариях писали ранее, хотелось бы увидеть видео-урок по созданию многостраничных сайтов Webpack 5.
Марафон с вебпаком!)
Вопрос: что если файлы с одним расширением (svg, например) встречаются в 3-х разных папках: img, fonts (иконочный шрифт) и в assets (favicon)? Как их разложить по нужным папкам в build?
Спасибо за урок! Очень классн объясняешь. С третьей попытки нашел нормальное видео, где у меня все пошло как надо.
Пожалуйста)
Все ломается и перестает работаеть когда добавляю
{
test: /\.html$/,
loader: 'html-loader',
},
перелопатил уже все не найду причины
Аналогично, когда придёт помощь, дайте клич )
Если еще актуально, то помогло
{
test: /\.html$/i,
loader: 'html-loader',
options: {
esModule: false,
}
},
в webpack 5 esModule стоит по дефолту true, так что ломает все
наткнулся на такую ошибку, в чем может быть проблема???
З.Ы. остановился на 43 минуте видео
ERROR in ./css/style.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object
that does not match the API schema.
- options has an unknown property 'hmr'. These properties are valid:
object { publicPath?, esModule?, modules? }
at validate (C:\Users\lenovo_v580c\Desktop\webpack_lessons2
ode_modules\schema-utils\dist\validate.js:104:11)
at Object.pitch (C:\Users\lenovo_v580c\Desktop\webpack_lessons2
ode_modules\mini-css-extract-plugin\dist\loader.js:39:29)
сам код
const path = require('path')
, HTMLWebpackPlugin = require('html-webpack-plugin')
, {CleanWebpackPlugin} = require('clean-webpack-plugin')
, MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDev = process.env.NODE_ENV === 'development'
, isProd = !isDev
, filename = (ext) => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;
module.exports = {
context: path.resolve(__dirname, 'src')
, mode: 'development'
, entry: '/js/main.js'
, output: {
path: path.resolve(__dirname, 'app')
, filename: `./js/${filename('js')}`
}
, devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, 'app'),
open: true,
compress: true,
hot: true,
port: 3000,
}
, plugins: [
new HTMLWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html')
, filename: 'index.html'
, minify: {
collapseWhitespace: isProd
}
})
, new CleanWebpackPlugin()
, new MiniCssExtractPlugin({
filename: `./css/${filename('css')}`
})
]
, module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev
},
},
'css-loader'
],
}
, {
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
}
};1
Давайте попробуем сделать учебный проект. А там и на react перейдём )
всем привет, такая ситуация: у index.html я вставил картинку(img src="img") и когда я запускаю webpack, то у в папке dist, в корне у меня появляется картинка у которой не название, а каракули, и если я запущу dev-server(npm run start), то браузер не отображает картинку, так как ссылается на путь той самой картинки с каракулями вместо названия, помогите плз решить проблему. File-loader подключен, картинки из src попадают куда надо, но браузер ссылается именно на это недоразумение в корне dist
test: /\.(jpe?g|png|gif|svg)$/i,
type: 'asset/resource',
generator: {
filename: () => {
return isDev ? 'img/[name][ext]' : 'img/[name].[contenthash][ext]';
}
}
},
как решить то ?
{test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
generator: {
filename: (isDev) =>{
if (isDev){
return 'static/img/[name][ext][query]';
}
return 'static/img/[hash][ext][query]';
}
},
},
@@ВиталийИльин-я1п решил так, что установил готовую сборку вебпака. в чем была проблема так и не понял
@@JesseJames-mh5kb file loader устарел, его заменили на assets, в данном случае resource
Очень узкоспецифичная сборка. Только для простых одностраничников. В реальной жизни, в проекте, больше одного html файла. Более того, часто есть необходимость, выносить повторяющиеся участки в отдельные файлы и подключать их, по мере необходимости.
MAX подскажи как настроить, чтобы собирались несколько страниц .html . Две бессонные ночи) не могу разобраться. Если скопировать код еще раз в webpack.config.js:
new HTMLWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html'),
filename: 'index.html',
minify: {
collapseWhitespace: isProd
}
}),
new HTMLWebpackPlugin({
template: path.resolve(__dirname, 'src/test.html'),
filename: 'test.html',
minify: {
collapseWhitespace: isProd
}
}),
то он две страницы собирает, а если страниц будет больше, то проблемка))
Разобрался)))
const fs = require('fs');
const PATHS = {
src: path.join(__dirname, './src')
}
const PAGES_DIR = `${PATHS.src}/pages/`
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))
...PAGES.map(page => new HtmlWebpackPlugin({
template: `${PAGES_DIR}/${page}`,
filename: `./${page.replace(/\.pug/, '.html')}`
})),
может кому пригодится)
у ого на linux и macos не ставиться дополнительное к плагину imagemin-webpack
то вот решение:
Linux:
sudo apt-get install libtool automake autoconf nasm
OS X:
brew install libtool automake autoconf nasm
все делал по видео, столкнулся с проблемой "html-loader", перекидывает картинки в папку app и подключает пути сам, плагин file-loader просто закидывает изображения в указанную папку но не подключает в html как этого избежать и сделать что бы картинки обрабатывал с подключением путей file-loader,?
Почему file-loader делает копию файла(битую) и подключает его в index.html? В сборке выглядит так
Спасибо за данное видео!!!! Все подробно рассказано. Да и было бы отлично увидеть теперь верстку с этой сборкой.!!
Сделал все тоже самое как на видео но publicPath не работает выдает ошибки
Не сегоднешний день сборка не работает, многие пакеты устарели
Это нормально)
В devServer вместо contentBas нужно static
Спасибо огромное!
В документации webpack 5 написано, что terser-webpack-plugin и
optimize-css-assets-webpack-plugin нет необходимости использовать
Сказал -> сделал!)Я как-то просил в комментариях webpack!)) Спасибо!!!!
Пожалуйста :)
у меня в папке dist появляется 2 иконки favicon, одна хешированная (созданная с помощью html webpack plugin), а вторая скопированная copy-webpack-plugin. Есть идеи как это пофиксить? в патернах копи плагина создал globOption а в них ignore, и вставил имя иконки и расширение, но почему то не работает, плагин все равно копирует иконку
тоже самое происходит и с картинками
У меня тоже такое было, для картинок и шрифтов использовала новую фичу asset, всё работает отлично (в generator указываем папку с нужным названием):
{
test: /\.(ico|gif|png|jpe?g|svg)$/i,
type: 'asset/resource',
generator: {
filename: 'img/[name][ext]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]'
}
}
годный инструмент. ждём 2ю часть. ей обязательно быть место! Спасибо за труд-с! Разве только index.html? а как же много-много html'ов? :)
Я сделал лишь базу :)
Отличное видео 👍 Для закрепления надо бы пересмотреть пару раз. Хотелось бы марафон по верстке с данной сборкой, т.к. в основном в вакансиях требуется именно webpack. Спасибо за подробное видео.
Вёрстку то на вебпаке не требуют) но я подумаю над этим, может летом сделаю
Если не работает, возьмите готовое с github, автор же дал ссылку в описании. Просто та что с его репа, она строго настроена под те зависимости, которые в ней использовались, и ошибок не должно быть вообще. А видео, просто как ознакомительное, можно себе в конфиге под видос комменты прописать, для более глубокого понимания.
Хотелось бы поинтересоваться. Возможно, Вам известен какой либо способ организации HTML файлов, в сборке реализованной на Webpack, подобный тому, что применяется в Gulp сборке с помощью плагина gulp-file-include. Проще говоря, речь идет о разделении одного большого HTML фала, на несколько маленьких фрагментов, с целью последующего включения в какой либо другой, общий документ.
Нет, не знаю такого. Возможно, его и нет)
Спасибо за урок! Без воды, четко, понятно и по делу! Молодец!
Спасибо))
авто префексов в css не хватает... или он с коробки это умеет? а так, спасибо, то что надо.)))
"webpack не является внутренней или внешней командой" - пришлось ставить глобально
Проверь что:
1. Установлен webpack-cli
2. Команда запускается не просто webpack, а npx webpack
всем порвет! возникла проблема.мне передали готовый проект и при запуске через npm выдает ошибку:
/Users/a431/Documents/бэкап на айклауд/програмирование/bizfinance/node_modules/.bin/encore: /usr/bin/env: bad interpreter: Operation not permitted
кто-то с таким сталкивался? работаю на маке через вс код. заранее спасибо)
file loader не работает на этой конфигурации!!! Будьте внимательны
html loader также не работает как надо, если img запихнуть напрямую в html то картинки работать не будут, через css все норм.
Спасибо большое за сборку. Сделал себе все как у тебя. Можно узнать зачем нужны файлы .stylelintrc и .editorconfig? если их удалить ничего не случиться? и еще вопрос на счет автопрефиксера, он тут уже есть по умолчанию или нужно устанавливать?
Не помню про автопрефиксер) надо проверить.
насчет тех файлов - первый отвечает за настройка стайллинта (проверяет css-код), второй - за форматирование в редакторе. можно удалить в принципе
Спасибо за разбор! Это моя первая сборка, собранная вручную, до этого верстал дедовскими методами) Все подробно и понятно, а самое главное - все работает) Жду еще видосов по webpack!
просто шикарная подача для новичков --- ставлю жирный наваристый лайк)
спасибо за работу) даже на скорости 2
Спасибо)
+ за марафон на этом конфиге!
а как обрабатывать несколько файлов scss, js, html
постараюсь в мае-июне запилить ролик на тему)
Марафон с вебпаком!!!)
how to file include webpack plugin by concatenation?
как добавить плагин inputmask?
импортировать те
Через npm
@@maxgraph не в этом плане
через es6
Привет!!! Hе подскажете как подключить favicon в webpack???
Возник такой вопрос, настроил Webpack в проекте все хорошо.При создании нового проекта нужно заново все настраивать или есть более простой вариант?
Копируешь все файлы, кроме нод модулей, и далее вызываешь npm i, все установится как в первый раз)
@@maxgraph спасибо большое
У кого возникли проблемы с опцией contentBase для devServer, просто замените contentBase на static и автоматическая перезагрузка заработает.
Прекрасно )
Плагины оптимизации для текущей версии WebPack устарели и нестабильно работают, к примеру, у меня не робят, даже image-minimizer-webpack-plugin, на который ссылает imagemin-webpack работает с версией 4. Ждем их обновления
Всем привет, может кто-то подскажет, как настроить webpack, так что бы я смог свой html разбивать на модули, например, так же как работает gulp-file-include
не работает webpack когда я установили это плагин html-webpack-plugin и вот такая ошибка [webpack-cli] Failed to load 'C:\Users\Magomedov\Documents\webpack\webpack-2\webpack.config.js' config
[webpack-cli] Error: Cannot find module 'loader-utils'
Require stack: ? несколько раз пробовала бесполезный
Если у кого-то сервак не работает, то ставьте версию "webpack-cli": "^3.3.12". Запуск такой - "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"
Может тогда проще сразу create-react-app если конечно разбирается человек
Импорт переменных из других scss не работает. В видео подобного не нашел, есть решение?
Аналогичная ситуация с комментариями. При комментировании кода scss, webpack просто отказывается делать билд.
Спасибо за видео! Подскажите, получилось ли как-то заставить работать svg-спрайты? "svg-sprite-loader" не добавляет в css пути к спрайту (issues/477), а "extract-svg-sprite-webpack-plugin", похоже, вообще не поддерживает webpack 5 т.к. выдает ошибку: "Error: Cannot find module 'webpack/lib/RuleSet'". Возможно, есть еще какие-то варианты?
картинка из стилей импортируется в корень app в нечитаемом формате, ничего не помогает.
Отличный видос! Все понятно.
не советую это видео, на актуальном webpack сборка уже не будет работать.
делал на 5м вебпаке, разве что у них опять что-то обновилось, но тут я не властен)
@@maxgraph , так может выпустить доп видео , там поменялось немного. Просто новички войдут в ступор :(
надо будет проверить, спасибо
у меня не работает только оптимизатор для картинок
Спасибо за урок. У меня возникла проблема с sass, консоль говорит, что нету подходящего лоудера, хотя все стоит, и все подключено, и это уже не первый раз возникает сложность в работе webpack and sass. Что может быть и где поискать ответ?
Смотреть надо, так увы не знаю
Поддерживаю все положительные коменты ниже, реально класно сделан ролик, понятно, структурированно, а главное на сегодняшний день актуально по webpack 5. Хотел сделать сборку по другим видосам - не смог из-за слабых пока знаний( А тут все четко!!! Благодарен за проделаный труд и потраченное время! Мира и добра Вам!!!
Благодарю за урок! То, что нужно.
Люблю практиков, а не водовозов!
А зачем вообще нужен сборщик файлов? Какие функции он выполняет? Где об этом детально?
Это практическое руководство по вебпаку, а не теория сборщиков
Для работы copy-webpack-plugin обязательно в папке должны быть файлы!
Нет, просто автор не показал как обработать случай отсутствия файлов. Есть специальное свойство в настройках плагина
16:50 хеш нужен только на dev, спутали условие
Есть кто использует Webpack 5 в разработке темы для Wordpress? Подскажите пожалуйста толковое видео или текстовый мануал.
Это видео отличное - все работает. Автору респект.
спасибо)
У меня не работали импорты в scss, только если из node_modules импортировать все работало.
Установил в зависимости "sass" теперь все ок.
Максим, почему у тебя все сразу собралось ?
Возможно потому что сам сасс обновился не так давно, а видео уже давнишнее.
Кстати, уже Webpack обновился до след. версии. Есть смысл смотреть это видео и повторять?
не проверял)
Максим, огромное тебе спасибо! Потратил уйму времени, чтобы разобраться, и только по твоему видео получилось запустить dev-server.
Пожалуйста))
Спасибо, очень годный материал, но я столкнулся с одной проблемой при обработке картинок, у меня создается папка img и там картинка, но почему-то создается еще файл с названием из кучи цифр - 173d746062b437dfebcf.png и в файле index.html тег img ссылается на него, и соотвественно картинка не открывается. Подскажите, пожалуйста, в чем проблема
что-то не так с настройкой кэша. Должно и в html подтягиваться
@@maxgraph так как это можно пофиксить? Есть какие-то варианты?
такая же проблема возникла, есть решение?
@@rostislavboyko5098 Я сейчас столкнулся с подобным но только это касалось шрифтов. Решение нашел не использовать ни file-loader ни url-loader, для картинок тоже. Для 5 webpack'a достаточно указать лоадер в таком формате :
{
test: /\.png/,
type: 'asset/resource'
generator: {
filename: 'static/[hash][ext][query]'
}
}
Немного повозился с именами файлов и теперь все ок.
@@ktytar ого, спасибо большое, нужно будет попробовать
Просто красава! Очень хорошая подача материала. Спасибо!
Здравствуйте, спасибо за сборку, отлично подали, правда я еще начинающий не все понял и поэтому ест один вопрос, когда собирается build и dev, дублируются файлы из папок img fonts и assets(был изменен при сборке было 'app' стало 'app/assets'), подскажите как это исправить.
возможно я и сам несу ерунду но 'app/assets' - означает то что внутри app есть одна папка assets если добавить в эту папку еще одну то app/assets будет просто app
попробую по вашему видеособрать ))надеюсь на этот раз будет удачно))
собралось , но все ImageMinimizerPlugin.loader, не стал...а так все супер...спасибо за труд...
Cпасибо большое
а то везде ролики про webpack4 и инфа и примеры уже не актуальны.
пожалуйста)
Максим привет, слушай возникает ошибка при запуске Хоста 3000 пишит
(node:348) UnhandledPromiseRejectionWarning: ValidationError: webpack Dev Server Invalid Options
options should NOT have additional properties
я грешу на свою винду старую 7 ка и Service-Pack 1 у меня стоит
Привет, судя по ошибке - заданы какие-то неверные опции для сервера. Ничего лишнего не делали?)
Спасибо, всё круто. Прикол, я сам уже давно на Галпе и вот решил что-то поменять - так что конец видео мне особо понравился =D
Пожалуйста)
Видео отличное, но есть местами дыры в тестах.
К примеру если написать для проверки babel асинхронную функцию - то ничего работать не будет.
Нужно изменить entry: './js/index.js' на entry: ['@babel/polyfill', './js/index.js'] и установка @babel/polyfill в Dependencies
Для тех, кто хочет работать с нативным css (шлифованным postcss) нужны postcss postcss-easy-import postcss-loader autoprefixer csso в DevDependencies
В plugins добавить new CssoWebpackPlugin(), и переписать лоадеры вот так
{
test: /\.css$/i,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) => path.relative(path.dirname(resourcePath), context) + '/'
}
},
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
EasyImport,
Autoprefixer
]
}
}
}
]
}
Ещё не досмотрел до самого конца, и впереди ещё кучу функционала которого нужно добавить будет самому. Но тебе большое спасибо за это видео) Пытался вкатиться в вебпак на курсе у Владилена, но там 4 версия и много чего не работает + заточено под проект курса, а мне нужно было собрать универсальный шаблон для вёрстки (решил переобуться с галпа и открыть для себя что-то новое). Сидел бы ждал обновления материала, если бы не ты)
@babel/polyfill вроде уже deprecated, рекомендуют ставить core-js и настраивать пресеты babel под него, в этом случае и в entry кроме index.js ничего добавлять не нужно.
В описании terser-webpack-plugin
сказано что в вебпак 5 он уже идет в упаковке и не нуждается в отдельной установке ( you are using webpack v5 or above you do not need to install this plugin), Вы вроде уже 5 версию используете, или я что-то не понял?
может я не увидел, или в тот момент у них этого не было. но люди на гитхабе писали мол не подходит для вебпака версии 5.
Макс, отличное видео, спасибо!
А теперь вопрос в студию: в 21 году у кого-нибудь получилось заставить заработать фоновую картинку?
test: /\.(jpe?g|png|gif|svg)$/i,
type: 'asset/resource',
generator: {
filename: () => {
return isDev ? 'img/[name][ext]' : 'img/[name].[contenthash][ext]';
}
}
},
как то -так
Вау, это идеальное объяснение. Еще и с кодом. Большое спасибо!!!
С меня подписка и лайк однозначно
Пожалуйста)
Добрый день.
Спасибо большое за сборку, но есть момент, она не работает под IE, подскажите пожалуйста как исправить что бы и в IE работало.
Добрый вечер. Не работаю с IE, не знаю)
Два раза пересобрала по Вашему видео, но все равно ошибка в загрузке картинки((
Скорее всего какие-то пакеты просто обновились и работают иначе
А тебе по кайфу чистить кэш постоянно в режиме dev? Если нет, то и хэш нужно для файла давать не только в режиме прода
Именно поэтому все стоит на продакшн :)
Максим, спасибо тебе огромное за видео! Ты просто супер!!!
Пожалуйста)
Когда марафон?
Спасибо за полезное видео! Было бы еще лучше показывать структуру проекта в самом VS Code
Пожалуйста) учту
спасибо, самое актуальное видео по вебпак 5, наконец все стало понятно
Пожалуйста)
Добрый день. Спасибо огромное за видео!!! Спасибо за Ваш труд. Единственное видео, по которому смог собрать проект, только Вас теперь смотрю.
Рад помочь)
Хорошая работа , сижу уже 5 часов возле видео , разбираю каждый момент , спасибо!!
Пожалуйста)
43:45 автор сам не понимает что делает, но в этом и вся суть вебпака, какое-то нагромождение команд и конфигураций. В самом начале он говорит что у нас будет одна проблемка, но о ней чуть позже... проблемок будет много и постоянно, поверьте)
Импортировать в js файл html и сыы, чтобы он потом автоматически подключался в html файле. Хитро
Кажется, вам нужно пересмотреть видео внимательнее)
А разве можно сделать как-то подругому?
Спасибо за полезность ! Лайк и Подписка !
Пожалуйста)
+
Супер! Спасибо за полезное видео!
Пожалуйста)
Разбор как надо! Спасибо!
Пожалуйста)
Спасибо
Пожалуйста)
Извиняюсь за глупый вопрос заранее!
Вот представим, что я начинаю новый проект. Создал папку, в нее закинул все конфиги, сделал такую же структуру.
Чтобы с этим работать, мне что-либо надо заново прописывать в консоле, что-то подгружать и так далее?)
Или же скопировал и все уже будет работать?
скопировать и ввести команду для старта)
@@maxgraph круто! Спасибо)
Ну, node_modules надо установить, это делается командой npm i, из package.json будут взяты все зависимости для установки. После этого запускать скрипты и работать.
Что там по спрайтам?)
надо будет проверить, что они там сделали) выпущу может дополнение
Автоматическая перезагрузка не работает, прелоадер на sass
Такая же ситуация. Пишёт мол не понимает что написано в main.scss. Сижу уже 3 часа не понимаю почему он не может прочитать scss
@@adamholo7079 У меня понимает что пишется в scss, только обновлять - только вручную работает. Это значит с прелоадером где-то у меня косяк. Долго просидел, даже уже в режим списывания перешел))) Не могу понять, где в настройках поменять
Добавь в module.exports
target: isDev ? 'web' : 'browserslist'
Не знаю, актуально или нет. Но вот ссылка с документации webpack.js.org/plugins/mini-css-extract-plugin/#common-use-case . Показан правильный вариант использования css, scss лоадеров. У меня заработало.
Подскажите пожалуйста,Webpack устанавливается глобально?Много места на компе занимает?Комп слабенький.
Можно и локально, если глобально не хочется) не много
@@maxgraph Спасибо за ответ!Наверное лучше глобально установить.Больше переживаю чтобы слабый комп.потянул.Node.js установил теперь хочу попробовать установить Webpack и сделать свою первую сборку в жизни.
Все получится)
@@maxgraph Спасибо!
А когда нужно использовать webpack? Я хочу сверстать например небольшой интернет-магазин. Как понять, что мне нужен webpack, а не gulp?
Для веб приложений вебпак, для вёрстки галп
@@maxgraph а что такое "веб приложение"? Типо фигмы в браузере?)
@@maxgraph ????
Да, как вариант. Или гугл диск например)
При установки webpack-dev-сервер появилась ошибка. Может кто знает как починить? помогите пж
npm ERR! code ERESOLVE
npm ERR! Cannot read property 'length' of undefined
код надо видеть)
@@maxgraph
package.json
{
"name": "chenlion",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "ilya",
"license": "ISC",
"devDependencies": {
"webpack": "^5.8.0",
"webpack-cli": "^4.2.0"
}
}
Терминал. Когда прописываю команду для подключения webpack-dev-server
PS B:\ilya\chen> npm i webpack-dev-server --save-dev
npm ERR! code ERESOLVE
npm ERR! Cannot read property 'length' of undefined
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Ilya\AppData\Local
pm-cache\_logs\2020-11-29T14_41_30_072Z-debug.log
@@zimtos2616 npm крашит... из github issues нашел что то похожее в его старых версиях. Пропробуй ноду (npm c нодой идет) переустановить/обновить на последнюю LTS с офф сайта nodejs.org. Какая версия npm ? (npm -v)
@@zimtos2616 мда